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...
Related
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>
I edited the w3schools example to put multiple sliders on a web page. The example shows two slides. I added a third. Now, the arrow on the right side shows all three images on all three sliders, but the arrow on the left side only shows two images.
w3schools Multi Sliders:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_multiple
This is the original code plus the addition of a third slider.
html><head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
.mySlides1, .mySlides2, .mySlides3 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 720px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
</style>
</head>
<body>
<h2 style="text-align:center">Multiple Slideshows</h2>
<p>Slideshow 1:</p>
<div class="slideshow-container">
<div class="mySlides1" style="display: none;">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides1" style="display: none;">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides1" style="display: block;">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-0, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
<p>Slideshow 2:</p>
<div class="slideshow-container">
<div class="mySlides2" style="display: none;">
<img src="https://www.w3schools.com/howto/img_band_chicago.jpg" style="width:100%">
</div>
<div class="mySlides2" style="display: none;">
<img src="https://www.w3schools.com/howto/img_band_la.jpg" style="width:100%">
</div>
<div class="mySlides2" style="display: block;">
<img src="https://www.w3schools.com/howto/img_band_ny.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯</a>
</div>
<p>Slideshow 3:</p>
<div class="slideshow-container">
<div class="mySlides3" style="display: none;">
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides3" style="display: none;">
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" style="width:100%">
</div>
<div class="mySlides3" style="display: block;">
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1, 2)">❮</a>
<a class="next" onclick="plusSlides(1, 2)">❯</a>
</div>
<script>
let slideIndex = [1,1];
let slideId = ["mySlides1", "mySlides2", "mySlides3"]
showSlides(1, 0);
showSlides(1, 1);
showSlides(1, 2);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 2) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body></html>
So, I need the left arrow to show the 3 images, not 2 only.
I have a Bootstrap 5 carousel with two lines of caption per slide. Each time right before the slide changes, I want the old top caption to move up and fade out, and the old bottom caption to move down and fade out. Then on the next slide, the new top caption should move down into place and fade in and the new bottom caption should move up into place and fade in.
I'm a novice coder and I'm doing this as an excercise. You can see the code I've written for this below, or in this CodePen. I've tried it two ways, the second method is commented in the JS section in CodePen.
I've also added a responsive section to the CSS so you can kind of see what I want to happen: the animation is triggered at a window width of 600px.
The same animation doesn't trigger when the slides change, though. Why not? How can I make it better?
Method 1:
import * as jquery from "https://cdn.skypack.dev/jQuery#1.7.4";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
const SlideClass = ("slide");
$('#CarouselTextAnim').on('slide.bs.carousel', function() {
TopCap.classlist.addClass(SlideClass);
BottomCap.classlist.addClass(SlideClass);
});
$('#CarouselTextAnim').on('slid.bs.carousel', function() {
TopCap.classlist.removeClass(SlideClass);
BottomCap.classlist.removeClass(SlideClass);
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</body>
Method 2 (only the Javascript is different):
import * as jquery from "https://cdn.skypack.dev/jQuery#1.7.4";
const TopCap = document.querySelector (".carousel-caption");
const BottomCap = document.querySelector (".caption-bottom");
$('#CarouselTextAnim').on('slide.bs.carousel', function() {
TopCap.setAttribute('top', '0');
TopCap.setAttribute('opacity', '0');
BottomCap.setAttribute('bottom', '0');
BottomCap.setAttribute('opacity', '0');
});
$('#CarouselTextAnim').on('slid.bs.carousel', function() {
TopCap.setAttribute('top', '40%');
TopCap.setAttribute('opacity', '1');
BottomCap.setAttribute('bottom', '4vh');
BottomCap.setAttribute('opacity', '1');
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide" data-bs-ride="carousel" data-bs-interval="5000" data-bs-pause="false">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</body>
You are mixing jQuery libraries in your pen, as well as mixing vanilla js with jQuery, just stick to one, I'd suggest vanilla.
I did not go your styles entirely to find out which class it uses to handle that bottom effect, which you will have to update, but the top element is working.
Also unlike using jQuery's $ to select elements, when using vanilla js const TopCap = document.querySelector (".carousel-caption"); and have several elements as in each slide, you would have to loop through them and select them all as follow: const TopCap = document.querySelectorAll (".carousel-caption");
const TopCap = document.querySelectorAll(".carousel-caption");
const BottomCap = document.querySelectorAll(".caption-bottom");
var myCarousel = document.querySelector('#CarouselTextAnim')
var carousel = new bootstrap.Carousel(myCarousel, {
interval: 2000,
wrap: true
})
myCarousel.addEventListener('slid.bs.carousel', function () {
TopCap.forEach(cap=>cap.classList.remove('slide'));
BottomCap.forEach(cap=>cap.classList.remove('slide'));
});
myCarousel.addEventListener('slide.bs.carousel', function () {
TopCap.forEach(cap=>cap.classList.add('slide'));
BottomCap.forEach(cap=>cap.classList.add('slide'));
});
.h1-carousel {
width: 100%;
text-align: center;
color: white;
text-shadow: 1px 1px 2px rgba(2,15,19,0.70);
font-family: 'Julius Sans One';
font-style: normal;
font-weight: 400;
font-size: 4vw;
transition: 0.4s;
}
.carousel-caption {
position: absolute;
top: 40%;
opacity: 1;
transition: 0.4s;
}
.carousel-caption.slide {
top: 0;
opacity: 0;
}
.caption-bottom {
position: relative;
bottom: 4vh;
opacity: 1;
transition: 0.4s;
}
.caption-bottom.slide {
bottom: -30vh;
opacity: 0;
}
#media (max-width: 600px) {
.carousel-caption {
top: 0;
opacity: 0;
}
.caption-bottom {
bottom: -30vh;
opacity: 0;
}
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<title>Carousel text anim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,300italic,400,700|Julius+Sans+One|Roboto+Condensed:300,400" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"></script>
<div class="container-fluid" style="padding: 0" id="carousel">
<section class="slideshow">
<div id="CarouselTextAnim" class="carousel slide carousel-slide">
<div class="carousel-inner">
<div class="carousel-item active" >
<img src="https://cutewallpaper.org/21/black-1920x1080-wallpaper/Dark-Desktop-Backgrounds-1920x1080-,-Best-Background-Images-.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 id="carousel1" class="h1-carousel mb-5 caption-top">TOP CAPTION</h1>
<h1 class="h1-carousel mb-5 caption-bottom">BOTTOM CAPTION</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/THsknvO.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">UP TOP</h1>
<h1 class="h1-carousel mb-5 caption-bottom">DOWN LOW</h1>
</div>
</div>
<div class="carousel-item">
<img src="https://wallpapercave.com/wp/z7tXPkz.jpg" class="img-carousel d-block w-100" alt="">
<div class="carousel-caption">
<h1 class="h1-carousel edit1 mb-5 caption-top">OVER</h1>
<h1 class="h1-carousel mb-5 caption-bottom">UNDER</h1>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="prev">
<span class="carousel-control carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#CarouselTextAnim" data-bs-slide="next">
<span class="carousel-control carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</div>
I need a little help with creating JS that would automatically scroll to the right (image has 100% height, window is of a size of a phone) of the image. When it reaches the end of the image, it should stop.
Second part is, when I click the arrows (to show another image), it should do the same animation with the second image.
So far, I have this:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides1 fade">
<div class="numbertext">1 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-500px';">
</div>
<div class="mySlides1 fade">
<div class="numbertext">2 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption Two</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">3 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption Three</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">4 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption four</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">5 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption four</div>
</div>
<div class="mySlides1 fade">
<div class="numbertext">6 / 6</div>
<img src="http://www.wallpaperez.org/wallpaper/games/Teenage-Mutant-Ninja-Turtles-Mutants-in-Manhattan-2622.jpg" class="img" onload="this.style.marginLeft = '-600px';">
<div class="text">Caption four</div>
</div>
<a class="prev" onclick="plusDivs(-1, 0)">❮</a>
<a class="next" onclick="plusDivs(1, 0)">❯</a>
</div>
<script>
var slideIndex = [1,1,1];
var slideId = ["mySlides1","mySlides2", "mySlides3"];
showDivs(1, 0); /*showDivs(1, 1); showDivs(1, 2);*/
function plusDivs(n, no) {
showDivs(slideIndex[no] += n, no);
}
function showDivs(n, no) {
var i; var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {
slideIndex[no] = 1
}
if (n < 1) {
slideIndex[no] = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
</script>
</body>
</html>
It works in terms that it does move the image to the side but not by the correct amount.
Just to make sure, the css is like this:
.slideshow-container {
height:100%;
overflow: hidden;
width: 100%;
}
.img {
height:100%;
left: 0px;
transition: all 5s ease-in-out;
/* margin: 0px;*/
}
img {
height:100%;
left: 0px;
transition: all 5s ease-in-out;
/* margin: 0px;*/
}
.mySlides1 {
display:block;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
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>