I'm trying to recreate the SwiperJS slider from this image, they also used SwiperJS to create this
My current situation can see in the image below, I have a problem with the next and previous buttons that are overlapping slider images, what is a solution for this, how can I shrink this container a little bit so my buttons are visible as the image above
Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<!-- Demo styles -->
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-slide img {
display: block;
max-width: 100%;
max-height: 100%;
height: auto;
margin: auto;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
I found the solution to the problem was positioning of .swiper-container and .page-row here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Slider</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
<style>
.page-row {
max-width: 1267px;
margin: 0 auto;
position: relative;
}
figure {
margin: 1.4rem 0 0;
}
.swiper-content__wrapper-img-desktop,
.swiper-content__wrapper-img-mobile {
position: relative;
width: 100%;
height: 100%;
}
.swiper-content__wrapper-img-desktop img,
.swiper-content__wrapper-img-mobile img {
max-width: 100%;
height: 100%;
object-fit: cover;
}
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
}
.page-row .swiper-container {
position: unset;
margin: 0 45px;
}
.swiper-container .swiper-slide a {
text-decoration: none;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 20px;
height: 3px;
opacity: .2;
border-radius: 20px;
background-color: #127749;
margin: 0 6px;
}
.swiper-container .swiper-pagination .swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-button-next, .swiper-button-prev {
color: #127749;
}
.swiper-button-next:after, .swiper-button-prev:after {
font-size: 21px;
}
.swiper-container .swiper-pagination {
position: relative;
bottom: 0;
margin-top: 3px;
}
.swiper-content__wrapper-img-desktop {
display: none;
}
.swiper-content__wrapper-img-mobile {
display: block;
}
.swiper-container .swiper-slide p {
color: #333;
font-family: Helvetica,sans-serif;
font-size: 13px;
font-weight: 700;
line-height: 1.4;
margin-top: 10px;
text-transform: uppercase;
}
#media screen and (min-width: 768px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 50px;
}
.swiper-content__wrapper-img-desktop {
display: block;
}
.swiper-content__wrapper-img-mobile {
display: none;
}
}
#media screen and (min-width: 410px) {
.swiper-container .swiper-pagination .swiper-pagination-bullet {
width: 25px;
}
}
</style>
</head>
<body>
<div class="page-row">
<!-- Swiper -->
<div class="swiper-container swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_550x615_crop_center.jpg?v=1614274913" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-landing-page_portrait_ae2f3a41-5cde-4dce-9174-61a5731a2df3_550x615_crop_center.jpg?v=1619775977" alt="">
</div>
<p>Rolex at David Rosas</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_550x615_crop_center.jpg?v=1614275003" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-rolex-collection_portrait_550x615_crop_center.jpg?v=1619775994" alt="">
</div>
<p>Rolex Collection</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_550x615_crop_center.jpg?v=1648639177" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-new-2022-watches_portrait_550x615_crop_center.jpg?v=1648639227" alt="">
</div>
<p>New Watches 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_landscape_06_550x615_crop_center.jpg?v=1624904926" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep_exploring_our_rolex_showrooms_portrait_06_550x615_crop_center.jpg?v=1624904992" alt="">
</div>
<p>Our History</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624902278" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Showroom-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624902292" alt="">
</div>
<p>Our Showrooms 2022</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/keep-exploring-servicing-your-rolex_550x615_crop_center.jpg?v=1614772380" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/KEEP-E_3_550x615_crop_center.jpg?v=1619776214" alt="">
</div>
<p>Servicing Your Rolex</p>
</a>
</div>
</div>
<div class="swiper-slide">
<div class="swiper-content__wrapper">
<a href=/pages/rolex-at-david-rosas>
<div class="swiper-content__wrapper-img-desktop">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-landscape_550x615_crop_center.jpg?v=1624900776" alt="">
</div>
<div class="swiper-content__wrapper-img-mobile">
<img src="https://cdn.shopify.com/s/files/1/0472/5843/5733/files/Contact-Us-Keep-Exploring-portrait_550x615_crop_center.jpg?v=1624900783" alt="">
</div>
<p>Contact Us</p>
</a>
</div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerView: 2,
spaceBetween: 30,
effect: "slide",
scrollbar: false,
loop: false,
breakpointsInverse: true,
breakpoints: {
768: {
slidesPerView: 2,
slidesPerGroup: 2,
loop: false
},
1024: {
slidesPerView: 3,
slidesPerGroup: 3,
slidesPerGroup: 1
}
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
Related
I'm writing a homepage for my business website. I encountered a problem after inserting a second Owl Carousel. The second slider is showing up fine but first one somehow disappeared. When I removed the second Carousel, the first one came back. I figured it has to do with giving the divs specific IDs or classes but no matter how I tried I can't seem to make them work.
I tried giving them specific class such as
div class="owl-one owl-carousel owl-theme" and div class="owl-two owl-carousel owl-theme"
As well as ids
div id="owl-one" class="owl-carousel owl-theme"
and div id="owl-two" class="owl-carousel owl-theme"
And changed the script to
$('.owl-one .owl-slideImg .owl-theme').owlCarousel({
$('.owl-two .owl-carousel').owlCarousel({
As well as
$('#owl-one .owl-slideImg .owl-theme').owlCarousel({
$('#owl-two .owl-carousel').owlCarousel({
What am I doing wrong? Please help!
Here is the first slider code:
<!DOCTYPE html>
<link rel="stylesheet" href="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/bootstrap-grid.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<style>
.owl-slideImg .owl-nav div{
position: absolute !important;
width: 25px !important;
height: 25px !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
top: 40%;
}
.owl-slideImg .owl-prev {
left: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
transform: rotate(180deg);
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-next {
right: -55px;
opacity: .65;
background: url(https://www.panpuri.com/asset/frontend/images/right-chevron.svg) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 20px 20px !important;
color: rgba(0, 0, 0, 0) !important;
transition: .33s all ease-out;
}
.owl-slideImg .owl-prev:hover{
opacity: 1;
}
.owl-slideImg .owl-next:hover{
opacity: 1;
}
#media only screen and (max-width: 991px) { /* MOBILE */
.owl-slideImg .slide-img{
height: 250px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
padding: 40px;
}
.owl-slideImg .box-icon-svg{
display: flex;
justify-content: end;
}
.box-icon-svg img{
max-width: 30px;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
.owl-slideImg .owl-nav div{
top: 20%;
}
.owl-slideImg .owl-prev {
left: 0 !important;
}
.owl-slideImg .owl-next {
right: 0 !important;
}
}
#media only screen and (min-width: 992px) { /* PC */
.owl-slideImg .slide-box-text{
height:100%;
display: flex;
justify-content: center;
justify-items: center;
align-items: center;
width:100%;
}
.owl-slideImg .slide-img{
height: 350px;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 100% auto !important;
}
.owl-slideImg .slide-box-text div{
width: 60%;
}
.owl-slideImg .box-icon-svg{
position: absolute;
right: 0;
bottom: 0;
display: flex;
margin-right: 40px;
margin-bottom: 20px;
}
.box-icon-svg img{
max-width: 60px !important;
margin-top: -20px;
}
.owl-slideImg .owl-item{
width: 100%;
}
.service-header{
text-align: center;
justify-content: center;
}
.container-fluid{
padding-bottom: 20rem;
margin-bottom: 20rem;
}
}
</style>
<main>
<br>
<br>
<br>
<h2 class="service-header">our service</h2>
<div class="col p-5">
<div class="row justify-content-center">
<div class="col-xl-8 col-lg-10 col-12 owl-slideImg ">
<div class="owl-carousel owl-theme">
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Installation_0702da65-4ad7-42df-9ea6-bca10d7c541a.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
Given our versatility and neat craftsmanship in stone installation, we have been providing our service to various leading construction and estate companies in Thailand.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">installation</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Installicon.svg?v=1646822679" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Supply.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With connections and credible sources from both domestic and oversea quarries, we can supply great quality stones that meet your needs and specifications.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">supply</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Supplyicon.svg?v=1646822694" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Restore.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
We let our designers draft up a digital rendered image beforehand for any customisation and specifications such as landscaping and counter tops.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">design</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Designicon.svg?v=1646822671" alt="">
</div>
</div>
</div>
</div>
<div class="owl-item">
<div class="row">
<div class="col-xl-6 col-12 slide-img" style="background: url(https://cdn.shopify.com/s/files/1/0609/1436/8761/files/Design.jpg);"> </div>
<div class="col-xl-6 col-12">
<div class="slide-box-text">
<div>
With high quality machines, we can provide any finishing and resurfacing process including polishing and honing.
</div>
</div>
<div class="box-icon-svg">
<h3 class="mr-3">restore</h3>
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/t/6/assets/Restoreicon.svg?v=1646822686" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".owl-slideImg .owl-theme").owlCarousel({
center: false,
loop: true,
autoplay: true,
autoplayTimeout: 50000,
nav: true,
dots: true,
items: 1,
margin: 40
});
});
</script>
And this is the second slider code:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<br>
<div class="logoslider">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo5.jpg" alt="The Ritz Carlton">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo2.jpg" alt="Phulaybay">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo6.jpg" alt="Silpakorn">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo3.jpg" alt="Property Perfect">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo1.jpg" alt="Thames Valley">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo4.jpg" alt="The Mall Group">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo7.jpg" alt="Pirom At Vineyard">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo8.jpg" alt="NYE Estate">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo13.jpg" alt="Balcony Thailand">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo10.jpg" alt="Harbor Laemchabang">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo12.jpg" alt="Belle Rama 9">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo9.jpg" alt="Major Development">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo11.jpg" alt="Gazebo Garden">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo15.jpg" alt="360 Pano">
</div>
<div class="item">
<img src="https://cdn.shopify.com/s/files/1/0609/1436/8761/files/G1_Client-Logo14.jpg" alt="Anantarakiri">
</div>
</div>
</div>
<br>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript">
$('.owl-carousel').owlCarousel({
loop: true,
autoplay: true,
nav: false,
dots: false,
margin: 40,
autoplayTimeout: 1500,
responsive:{
0:{
items:4
},
600:{
items:8
},
1000:{
items:8
}
}
})
</script>
</body>
<style>
.logoslider{
display: flex;
width: 80%;
justify-content: center;
justify-items: center;
align-items: center;
margin-left: auto;
margin-right: auto;
}
</style>
Try like this
Owl Carousel One
var owl_carousel_one = $('.owl-carousel-one');
owl_carousel_one.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Owl Carousel Two
var owl_carousel_two = $('.owl-carousel-two');
owl_carousel_two.owlCarousel({
loop: true,
margin: 30,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
smartSpeed: 1000,
responsive: {
0: {
items: 4
},
600: {
items: 8
},
1000: {
items: 8
}
}
});
Just use these unique classes (.owl-carousel-one, .owl-carousel-two, and so on...) for each owl carousel HTML element. No need for any ID.
I am trying to create a vertical thumb gallery that controls a main gallery. The issue I'm having is that when some of the thumbs are clicked, the thumb gallery automatically slides. Is there a way to disable that sliding, and make it so that all sliding only occurs when the nav buttons are clicked?
I'm also running into a spacing issue in the thumb gallery, which is evident when viewing the fiddle/snippet below. I need a 6px gap. Also, the thumbs in the second column are being cut off. I don't understand, because I set a width of 166px for the gallery (2 80px media items + 6px gap = 166px).
https://jsfiddle.net/guqsayj3/
let galleryThumbs = new Swiper('.prod-gallery .gallery-thumbs', {
spaceBetween: 6,
slidesPerGroup: 1,
slidesPerView: 5,
slidesPerColumn: 2,
//slideToClickedSlide: true,
//allowTouchMove: false,
//freeMode: true,
//watchSlidesVisibility: true,
//watchSlidesProgress: true,
direction: 'vertical',
noSwiping: false,
navigation: {
nextEl: '.gallery-thumbs-wrap .next',
prevEl: '.gallery-thumbs-wrap .prev',
},
//controller: {
//control: galleryTop,
//},
});
let galleryTop = new Swiper('.prod-gallery .gallery-main', {
spaceBetween: 10,
thumbs: {
swiper: galleryThumbs
}
});
//galleryThumbs.controller.control = galleryTop;
.prod-gallery {
display: grid;
grid-template-columns: 166px minmax(20px, 76px) 300px;
align-items: center;
}
.prod-gallery .gallery-thumbs {
height: 530px;
}
.prod-gallery .gallery-thumbs .swiper-slide {
cursor: pointer;
width: 80px;
opacity: 0.4;
}
.prod-gallery .gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
}
.prod-gallery .gallery-thumbs .media {
width: 80px;
height: 100px;
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
.prod-gallery .gallery-main {
width: 100%;
grid-column-start: 3;
}
.prod-gallery .gallery-main .media {
width: 300px;
height: 300px;
background: grey;
display: flex;
align-items: center;
justify-content: center;
}
img {
max-width: 100%;
height: auto;
}
<script src="https://unpkg.com/swiper#6.3.4/swiper-bundle.js"></script>
<link href="https://unpkg.com/swiper#6.3.4/swiper-bundle.css" rel="stylesheet"/>
<div class="prod-gallery">
<div class="gallery-thumbs-wrap swiper-no-swiping">
<!-- Nav -->
<div class="nav-btn prev">
<img src="https://via.placeholder.com/30x30">
</div>
<div class="nav-btn next">
<img src="https://via.placeholder.com/30x30">
</div>
<!-- Slider -->
<div class="gallery-thumbs swiper-container">
<div class="swiper-wrapper" style="height: 742px; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide">
<div class="media">1</div>
</div>
<div class="swiper-slide">
<div class="media">2</div>
</div>
<div class="swiper-slide">
<div class="media">3</div>
</div>
<div class="swiper-slide">
<div class="media">4</div>
</div>
<div class="swiper-slide">
<div class="media">5</div>
</div>
<div class="swiper-slide">
<div class="media">6</div>
</div>
<div class="swiper-slide">
<div class="media">7</div>
</div>
<div class="swiper-slide">
<div class="media">8</div>
</div>
<div class="swiper-slide">
<div class="media">9</div>
</div>
<div class="swiper-slide">
<div class="media">10</div>
</div>
<div class="swiper-slide">
<div class="media">11</div>
</div>
<div class="swiper-slide">
<div class="media">12</div>
</div>
<div class="swiper-slide">
<div class="media">13</div>
</div>
</div>
</div>
</div>
<div class="gallery-main swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="media">1</div>
</div>
<div class="swiper-slide">
<div class="media">2</div>
</div>
<div class="swiper-slide">
<div class="media">3</div>
</div>
<div class="swiper-slide">
<div class="media">4</div>
</div>
<div class="swiper-slide">
<div class="media">5</div>
</div>
<div class="swiper-slide">
<div class="media">6</div>
</div>
<div class="swiper-slide">
<div class="media">7</div>
</div>
<div class="swiper-slide">
<div class="media">8</div>
</div>
<div class="swiper-slide">
<div class="media">9</div>
</div>
<div class="swiper-slide">
<div class="media">10</div>
</div>
<div class="swiper-slide">
<div class="media">11</div>
</div>
<div class="swiper-slide">
<div class="media">12</div>
</div>
<div class="swiper-slide">
<div class="media">13</div>
</div>
</div>
</div>
</div>
Add slidesPerColumnFill: 'row' and indents between slides will be correct
There are two options here:
Columns follow a vertical direction
DEMO
1..4
2..5
3..6
Need to add slidesPerColumnFill: 'row'
Columns follow a horizontal direction
DEMO
1..2
3..4
5..6
Need to set a property flex-direction: row; for .swiper-container-multirow-column > .swiper-wrapper
.swiper-container-multirow-column > .swiper-wrapper{
flex-direction: row;
}
I've been trying to add a slider (photo and text) to my blogger. I added the code from https://codepen.io/shamim539/pen/GNqLda) into my blogger html/javascript gadget but it doesn't seem to work. The images and text appear in individual images and text in a column, instead of how the slider was supposed to work.
Hope someone can help. What I used:
<!-- BLOG POSTS -->
<section class="testimonials">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="" />
<div class="item-details">
<h5>Chicken for two Roasted at this price</h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
<style>
.testimonials{ position: relative; padding-top: 10px; }
#customers-testimonials{
.item-details{
background-color: #F7F6F6;
color: #4A4A51;
padding: 1.5em 1.5em;
text-align: left;
h5{
margin: 0 0 0.2em;
font-size: 1.5em;
line-height: 1.2em;
span{
color: red;
float: right;
padding-right: 0.2em;
}
}
p{ font-size: 1em; }
}
.item {
text-align: center;
margin-bottom:10px;
}
}
.owl-carousel .owl-nav [class*='owl-'] {
-webkit-transition: all .3s ease;
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next, .owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #eee;
border: 1px solid #eee;
text-align: center;
}
.owl-carousel .owl-prev {
left: 20px;
}
.owl-carousel .owl-next {
right: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type='text/javascript'/>
<script>
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel( {
loop: true;
center: true;
items: 3;
margin: 10;
autoplay: false;
dots:true;
nav:true;
autoplayTimeout: 8500;
smartSpeed: 450;
navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'];
responsive: {
0: { items: 1; };
768: { items: 2; };
1170: { items: 3; };
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>owl carousel 2 testimonial slider example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css">
<link rel="stylesheet" href="http://themes.audemedia.com/html/goodgrowth/css/owl.theme.default.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/assets/owl.carousel.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<style>
.testimonials {
background-color: #f33f02;
position: relative;
padding-top: 80px;
}
.testimonials:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 30%;
background-color: #ddd;
}
#customers-testimonials .item-details {
background-color: #333333;
color: #fff;
padding: 20px 10px;
text-align: left;
}
#customers-testimonials .item-details h5 {
margin: 0 0 15px;
font-size: 18px;
line-height: 18px;
}
#customers-testimonials .item-details h5 span {
color: red;
float: right;
padding-right: 20px;
}
#customers-testimonials .item-details p {
font-size: 14px;
}
#customers-testimonials .item {
text-align: center;
margin-bottom: 80px;
}
.owl-carousel .owl-nav [class*='owl-'] {
transition: all .3s ease;
}
.owl-carousel .owl-nav [class*='owl-'].disabled:hover {
background-color: #D6D6D6;
}
.owl-carousel {
position: relative;
}
.owl-carousel .owl-next,
.owl-carousel .owl-prev {
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
position: absolute;
top: 30%;
font-size: 20px;
color: #fff;
border: 1px solid #ddd;
text-align: center;
}
.owl-carousel .owl-prev {
left: -70px;
}
.owl-carousel .owl-next {
right: -70px;
}
</style>
</head>
<body>
<!-- TESTIMONIALS -->
<section class="testimonials">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="customers-testimonials" class="owl-carousel">
<!--TESTIMONIAL 1 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/spaghetti-with-carbonara-sauce_1216-324.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 1 -->
<!--TESTIMONIAL 2 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/dishes-with-healthy-waffles_1220-367.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 2 -->
<!--TESTIMONIAL 3 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/top-view-of-tasty-noodles-with-prawns_1203-1769.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 3 -->
<!--TESTIMONIAL 4 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/burguer-with-garnish_1088-72.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 4 -->
<!--TESTIMONIAL 5 -->
<div class="item">
<div class="shadow-effect">
<img class="img-responsive" src="https://image.freepik.com/free-photo/delicious-pastry-with-chicken_1203-1616.jpg" alt="">
<div class="item-details">
<h5>Chicken for two Roasted <span>$21</span></h5>
<p>There was a time when Chinese food in this country meant (Americanized) Cantonese food.</p>
</div>
</div>
</div>
<!--END OF TESTIMONIAL 5 -->
</div>
</div>
</div>
</div>
</section>
<!-- END OF TESTIMONIALS -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.1/owl.carousel.min.js'></script>
<script>
jQuery(document).ready(function($) {
"use strict";
$('#customers-testimonials').owlCarousel( {
loop: true,
center: true,
items: 3,
margin: 30,
autoplay: true,
dots:true,
nav:true,
autoplayTimeout: 8500,
smartSpeed: 450,
navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
responsive: {
0: {
items: 1
},
768: {
items: 2
},
1170: {
items: 3
}
}
});
});
</script>
</body>
</html>
The codepen link gives you SCSS codes that needs to be compiled into CSS. Both are different and works accordingly. So just copy
paste HTML and JS parts here.
You have NOT INCLUDED EXTERNAL CSS links that are needed to this design.
Please take the tour and learn how to ask a good question. Thank you :)
I'm trying to create a lightbox effect using modals and slideshows. It works just fine as long as only one slideshow is on a page. I would like to have multiple slideshow/lightboxs on a page. I am using the CSS and java from the link below in addition to bootstrap 3.
https://www.w3schools.com/howto/howto_js_lightbox.asp
Here is the code I modified from the link. I'm new at this so any help is appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>BL Portfolio</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/BLportfolio.css" rel="stylesheet" type="text/css">
<style type="text/css">
body {
background-color: #FFFFFF;
}
a:link {
color: #B77433;
text-decoration: none;
}
a:hover {
color: #FFD600;
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/averia-libre:n3:default.js" type="text/javascript"></script>
</head>
<body>
<!-- Illustration Section -->
<div class="container-fluid">
<div class="row"><h6>ILLUSTRATION</h6>
<div class="row">
<div class="item2">
<img src="images/illustration/thumbs/steampunkThumb.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/sdThumb.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/monsterThumb.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/weaselThumb.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/supermanThumb.jpg" onclick="openModal();currentSlide(5)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/illustration/thumbs/bushThumb.jpg" onclick="openModal();currentSlide(6)" class="hover-shadow">
</div>
<div class="row"><HR SIZE="2" WIDTH="95%"></div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="images/illustration/steampunk.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="images/illustration/sd.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="images/illustration/monster.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="images/illustration/weasel.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="images/illustration/superman.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="images/illustration/bush.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/steampunkThumb.jpg" onclick="currentSlide(1)" alt="STEAMPUNK">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/sdThumb.jpg" onclick="currentSlide(2)" alt="SAN DIEGO">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/monsterThumb.jpg" onclick="currentSlide(3)" alt="MONSTER">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/weaselThumb.jpg" onclick="currentSlide(4)" alt="WEASEL">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/supermanThumb.jpg" onclick="currentSlide(5)" alt="SUPERMAN">
</div>
<div class="item3">
<img class="demo" src="images/illustration/thumbs/bushThumb.jpg" onclick="currentSlide(6)" alt="W">
</div>
</div>
</div>
<!-- Illustration End -->
<!-- Technical Section -->
<div class="container-fluid">
<div class="row"><h6>TECHNICAL DRAFTING</h6>
<div class="row">
<div class="item2">
<img src="images/technical/thumb/tech1Thumb.jpg" onclick="openModal();currentSlide(7)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech2Thumb.jpg" onclick="openModal();currentSlide(8)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech3Thumb.jpg" onclick="openModal();currentSlide(9)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech4Thumb.jpg" onclick="openModal();currentSlide(10)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech5Thumb.jpg" onclick="openModal();currentSlide(11)" class="hover-shadow">
</div>
<div class="item2">
<img src="images/technical/thumb/tech6Thumb.jpg" onclick="openModal();currentSlide(12)" class="hover-shadow">
</div>
<div class="row"><HR SIZE="2" WIDTH="95%"></div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img src="images/technical/tech1.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img src="images/technical/tech2.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img src="images/technical/tech3.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img src="images/technical/tech4.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img src="images/technical/tech5.jpg" style="width:100%">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img src="images/technical/tech6.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<div class="caption-container">
<p id="caption"></p>
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech2Thumb.jpg" onclick="currentSlide(2)" alt="Tech2">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech3Thumb.jpg" onclick="currentSlide(3)" alt="Tech3">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech4Thumb.jpg" onclick="currentSlide(4)" alt="Tech4">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech5Thumb.jpg" onclick="currentSlide(5)" alt="Tech5">
</div>
<div class="item3">
<img class="demo" src="images/technical/thumb/tech6Thumb.jpg" onclick="currentSlide(6)" alt="Tech6">
</div>
</div>
</div>
<!-- Technical End -->
</div>
</div>
<footer class="row">
</footer>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
.row > .column {
padding: 0 8px;
}
.row:after {
content: "";
display: table;
clear: both;
}
.column {
float: left;
width: 25%;
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Modal2 (background) */
.modal2 {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: black;
}
/* Modal2 Content */
.modal2-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
width: 90%;
max-width: 1200px;
}
/* The Close Button */
.close {
color: white;
position: absolute;
top: 10px;
right: 25px;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.caption-container {
text-align: center;
background-color: black;
padding: 2px 16px;
color: white;
}
img.demo {
opacity: 0.6;
}
.active,
.demo:hover {
opacity: 1;
}
img.hover-shadow {
transition: 0.3s
}
.hover-shadow:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
}
Java
function openModal() {
document.getElementById('myModal').style.display = "block";
}
function closeModal() {
document.getElementById('myModal').style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
captionText.innerHTML = dots[slideIndex-1].alt;
}
came looking for a different solution, but looking at the code, it seems that the error may be here...
<div class="item3">
<img class="demo" src="images/technical/thumb/tech1Thumb.jpg" onclick="currentSlide(1)" alt="Tech1">
</div>
In the 2nd batch, should not the "currentSlide(1) actually be a continuation from the 6 slides above, so the content should be currentSlide(7) and onward down the script? Perhaps it was too simple...
I am trying to create a content slider, and am having difficulties with it functioning appropriately. Specifically when testing locally the aspect that is not working is: (When you click the arrows left or right the current-slide fades out and fades back in but the slide content does not switch to the next block of content.)
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<html lang="en-US">
<meta charset="UTF-8">
<title>PLACEHOLDER</title>
<meta name"keywords" content="PLACEHOLDER" />
<meta name"description" content="PLACEHOLDER" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="code.js"></script>
<link type="text/css" rel="stylesheet" href="style2.css" />
</head>
<body>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
Here is my JS:
var main = function () {
$('.arrow-next').click(function () {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next()
if (nextSlide.length === 0) {
nextSlide = $('.slide').first();
nextDot = $('.dot').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function()
{
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev()
if(prevSlide.length == 0)
{
prevSlide = $('.slide').last();
prevDot = $('.dot').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
HERE IS MY CSS(Just to tie it all together):
.slider {
position: relative;
width: 50%;
height: 470px;
margin-left: 25%;
border-bottom: 1px solid #ddd;
margin-top: -8%;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: right;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
margin-top: 30%;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
NOTE: I only put the sections of html/js/css that matter for this case. And I used placeholders for some text and images. On my local machine those placeholders are replaced with correct content.
if you look at the HTML closely, you'll see that the slider div's are not positioned properly. all the other div's with the class '.slide' are enclosed inside <div class="slide active-slide"> whereas they should be independent of each other.
the javascript code is not able to find the next() slide since they're all contained in one single parent which is the 'active-slide'
you need to update your HTML to the following
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1 id="welcome">FIRST SLIDE HEADER</h1>
<div id="img1">
<img src="######.png" width="450" height="250" />
</div>
<div id="intro">
<p>FIRST SLIDE CONTENT</p </div>
</div>
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>Slide2</h1>
<p>Slide 2 stuff.</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 3</h1>
<h2>Slide3</h2>
<p>Slide3 content</p>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Slide 4</h1>
<p>slide 4 content</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<a href="#" class="arrow-prev">
<img src="ARROW LEFT IMAGE">
</a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<a href="#" class="arrow-next">
<img src="ARROW RIGHT IMAGE">
</a>
</div>
here's a working JSFIDDLE for the same. hope this helps
You just need to include the jQuery library from here: http://jquery.com/download/
You will get this error if you haven't included jquery file or you are getting conflicts in jquery.
ReferenceError: $ is not defined
Add following in Head section of your code:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>