We Keep Coding

How to use more than one custom javascript css carousel on same page?

I am using an image carousel which is working perfectly. Except that I can't use 2nd, 3rd carousel on same page. If I use more than one carousel on same page than the 2nd and 3rd are not working only the 1st. I am not expert and need some help if it possbile to change the code and have more than one carousel on same page? Here is the code:
Style:
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
#prev {
left: 10px;
}
#next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
Script:
const carousel = document.querySelector('.img-carousel');
const prevBtn = document.getElementById('prev');
const nextBtn = document.getElementById('next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = () => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
nextBtn.addEventListener('click', e => {
nextCarousel();
});
//Prev Carousel
const prevCarousel = () => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
prevBtn.addEventListener('click', e => {
prevCarousel();
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(nextCarousel, intervalTime);
}
});
//Debounce
var previousCall;
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
Html:
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button id="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button id="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>

Here is a solution looping through the carousels. All you need to do is to make sure your styles are added. There are styles based on the id of the carousels - that needs to be added for all of them or made universal.
Here is little bit revised answer, no need to declare the functions and variables several times inside the forLoop like it was before.
What this code does it selects all carousels with the class .img-carousel and loops through them. Adding functionality to each carousel and relative buttons (based on index). The core functionality is the same only now it is added dynamically.
const carousels = document.querySelectorAll('.img-carousel');
const prevBtn = document.querySelectorAll('.prev');
const nextBtn = document.querySelectorAll('.next');
let carsouselImages = document.querySelectorAll('.img-carousel div');
//Next Carousel
const nextCarousel = (carousel) => {
if(carsouselImages[carsouselImages.length - 1]) {
carousel.scrollTo(0, 0);
}
carousel.scrollBy(300, 0);
};
//Prev Carousel
const prevCarousel = (carousel) => {
if(carsouselImages[0]) {
carousel.scrollTo(4800,0);
}
carousel.scrollBy(-300, 0);
};
// Auto carousel
carousels.forEach((carousel, index)=>{
nextBtn[index].addEventListener('click', e => {
nextCarousel(carousel);
});
prevBtn[index].addEventListener('click', e => {
prevCarousel(carousel);
});
// Auto carousel
const auto = true; // Auto scroll
const intervalTime = 5000;
let sliderInterval;
let previousCall;
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
};
carousel.addEventListener('mouseover', (stopInterval) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('mouseleave', (startInterval) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//for mobile events
carousel.addEventListener('touchstart', (stopIntervalT) => {
clearInterval(sliderInterval);
});
carousel.addEventListener('touchend', (startIntervalT) => {
if (auto) {
sliderInterval = setInterval(()=>nextCarousel(carousel), intervalTime);
}
});
//Debounce
window.addEventListener('resize', () => {
if (previousCall >= 0) {
clearTimeout(previousCall);
}
previousCall = setTimeout(() => {
carousel.scrollBy(-300, 0);
}, 200);
});
});
/** img-carousel **/
#imgages-carousel {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
#imgages-carousel1 {
display: grid;
align-items: center;
justify-items: center;
padding: 40px 0px;
}
.img-carousel-container {
width: 800px;
position: relative;
}
.img-carousel {
display: flex;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 5px;
}
.img-carousel div {
flex: none;
scroll-snap-align: start;
width: 800px;
position: relative;
}
.img-carousel div img {
display: block;
width: 100%;
object-fit: cover;
}
.img-carousel div p {
position: absolute;
top: 0;
right: 10px;
background: rgba(0,0,0,0.5);
color: #fff;
padding: 5px;
border-radius: 10px;
}
.img-carousel-container button {
position: absolute;
top: calc(50% - 15px);
transform: translateY(-50%);
border: none;
background-color: rgba(255, 193, 7, 0.7);
color: #000;
cursor: pointer;
padding: 10px 15px;
border-radius: 50%;
outline: none;
opacity: 0;
transition: all ease-in-out 0.5s;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
.img-carousel-container:hover button {
opacity: 1;
}
.img-carousel-container button:hover {
background-color: #ffc107;
}
/** custom scrollbar **/
.img-carousel::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.img-carousel::-webkit-scrollbar-thumb {
background: #ffc107;
border-radius: 10px;
}
.img-carousel::-webkit-scrollbar-track {
background: transparent;
}
.img-carousel-container:hover .img-carousel::-webkit-scrollbar-thumb {
visibility: visible;
}
#media screen and (max-width: 800px) {
.img-carousel-container {
width: 100%;
}
.img-carousel div {
width: 100%;
}
}
<!-- section images carousel -->
<section id="imgages-carousel">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x"></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x"></i></button>
</div>
</section>
<section id="imgages-carousel1">
<div class="img-carousel-container">
<div class="img-carousel">
<div>
<img src="https://source.unsplash.com/9Nok_iZEgLk/800x450">
<p>1/6</p>
</div>
<div>
<img src="https://source.unsplash.com/4v7ubW7jz1Q/800x450">
<p>2/6</p>
</div>
<div>
<img src="https://source.unsplash.com/rtCujH697DU/800x450">
<p>3/6</p>
</div>
<div>
<img src="https://source.unsplash.com/ELv8fvulR0g/800x450">
<p>4/6</p>
</div>
<div>
<img src="https://source.unsplash.com/LoPGu6By90k/800x450">
<p>5/6</p>
</div>
<div>
<img src="https://source.unsplash.com/Ndz3w6MCeWc/800x450">
<p>6/6</p>
</div>
</div>
<button class="prev"><i class="fas fa-chevron-left fa-2x "></i></button>
<button class="next"><i class="fas fa-chevron-right fa-2x "></i></button>
</div>
</section>

How do I make a circular effect with the left and right arrows?

Here's my code in CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx
This can probably be done with property border-radius: 50%;.
This is to look like on this website:
https://www.studiointerbit.pl/kontakt/
How do I make a circular effect with the left and right arrows?
I will be very grateful for effective help.
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
<div class="menu">
<a>MENU</a>
</div>
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
<div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>

You can use ::before selector, and style it accordingly, as per the needs.
$(document).ready(function() {
$('.refresh').click(function(e) {
location.reload();
});
});
//-----------------------------------------
var active_img_num = 0;
var slide_interval_time = 5;
var slide_during_time = 2;
var slide_fast_during_time = 2;
var slide_timer;
var num_of_img = 1;
var num_of_img_tag = 1;
var sliding_now = false;
$
(
function() {
var div_tag, a_tag, img, cap;
num_of_img_tag = $(".slider_img_wrapper").length
num_of_img = $(".slider_img_wrapper img").length;
active_img_num = adjust_img_num(active_img_num)["img_tags"];
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
}
next_img_num = adjust_img_num(active_img_num + 1)["img_tags"];
slide_timer = setInterval(slide, slide_interval_time * 1000);
$(".slider_list_wrapper li").removeClass("active_slide");
$(".slider_list_wrapper li").eq(active_img_num).addClass("active_slide");
$(".slider_list").css("transition", slide_during_time + "s");
}
);
function adjust_img_num(img_num) {
var result = [];
if (!$.isNumeric(img_num)) {
result["images"] = 0;
result["img_tags"] = 0;
} else if (img_num < 0) {
result["images"] = (num_of_img + (img_num % num_of_img)) % num_of_img;
result["img_tags"] = (num_of_img_tag + (img_num % num_of_img_tag)) % num_of_img_tag;
} else {
result["images"] = img_num % num_of_img;
result["img_tags"] = img_num % num_of_img_tag;
}
return result;
}
function search_direction(now_positon = 0, goal_position = 0) {
var i = 0;
while (true) {
if ((goal_position % num_of_img) == adjust_img_num(now_positon + i)["images"]) {
return {
"plus": true,
"target_num": adjust_img_num(now_positon + i)["img_tags"],
"move_value": i
};
} else if ((goal_position % num_of_img) == adjust_img_num(now_positon - i)["images"]) {
return {
"plus": false,
"target_num": adjust_img_num(now_positon - i)["img_tags"],
"move_value": -i
};
}
i++;
}
}
function slide(next_img = next_img_num, duration = slide_during_time, easing = "easeInOutCubic") {
$
(
function() {
next_img = adjust_img_num(next_img)["img_tags"];
if (sliding_now) {
return;
} else {
sliding_now = true;
}
var target_img_info = search_direction(active_img_num, next_img);
if (Math.abs(target_img_info["move_value"]) >= 2) {
move_images(active_img_num + (target_img_info["plus"] ? 1 : -1), next_img, slide_fast_during_time, "linear");
} else {
move_images(next_img, next_img, duration, easing);
}
function move_images(next_img, target_img = next_img, duration = slide_during_time, easing = "swing") {
var translateX_matrix = [];
$(".slider_img_wrapper").css("transition", duration + "s");
for (var i = 0; i < num_of_img_tag; i++) {
translateX_matrix = $(".slider_img_wrapper").eq(i).css("transform").slice(7, -1).split(",");
translateX_matrix[4] = parseInt(translateX_matrix[4]) - (target_img_info["move_value"]) * parseInt($(".slider_img_wrapper").css("width"));
$(".slider_img_wrapper").eq(i).css("transform", "matrix(" + translateX_matrix.join(",") + ")").css("left", "0%");
}
$(".slider_list_wrapper li").removeClass("active_slide");
$(".slider_list_wrapper li").eq(target_img % num_of_img).addClass("active_slide");
setTimeout
(
function() {
active_img_num = adjust_img_num(target_img)["img_tags"];
next_img_num = adjust_img_num(target_img + 1)["img_tags"];
$(".slider_img_wrapper").css("transition", "0s");
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
}
sliding_now = false;
},
duration * 1000
);
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
}
}
);
}
$(".slider_objects").on(
"click touchend",
".prev_btn",
function() {
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
slide(adjust_img_num(active_img_num - 1)["img_tags"]);
}
);
$(".slider_objects").on(
"click touchend",
".next_btn",
function() {
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
slide(adjust_img_num(active_img_num + 1)["img_tags"]);
}
);
$(document).on(
"click touchend",
".slider_list",
function() {
var clicked_num = $(".slider_list").index(this);
clicked_num = search_direction(active_img_num, clicked_num)["target_num"];
slide(clicked_num);
}
);
document.addEventListener(
'touchstart',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x1 = event.changedTouches[0].pageX;
move_x_percent = 0;
clearInterval(slide_timer);
}, {
passive: false
}
);
document.addEventListener(
'touchmove',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x2 = event.changedTouches[0].pageX;
move_x_percent = (touch_x1 - touch_x2) / window.innerWidth * 100;
if (false) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num - 1)["img_tags"]).css("left", (-move_x_percent - 100) + "%");
$(".slider_img_wrapper").eq(active_img_num).css("left", (-move_x_percent) + "%");
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + 1)["img_tags"]).css("left", (-move_x_percent + 100) + "%");
}
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").css("left", (-move_x_percent) + "%");
}
if (Math.abs(move_x_percent) >= 75) {
if (touch_x1 - touch_x2 > 0) {
slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
} else {
slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
}
touch_x1 = touch_x2;
}
}, {
passive: false
}
);
document.addEventListener(
'touchend',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x3 = event.changedTouches[0].pageX;
if (Math.abs(move_x_percent) > 30) {
if (touch_x1 - touch_x2 > 0) {
slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
} else {
slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
}
} else {
slide(active_img_num, slide_fast_during_time, "easeOutQuart");
}
move_x_percent = 0;
}, {
passive: false
}
);
//-----------------------------------------
$(document).ready(function() {
var NavY = $('.menu-container').offset().top;
var stickyNav = function() {
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.menu').addClass('sticky');
} else {
$('.menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
body {
background-color: #bdbdbd;
font-family: Verdana;
margin: 0;
position: relative;
height: 220vh;
z-index: -100;
}
.header-container {
background-color: #01579b;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 20vh;
z-index: 4;
}
.header {
background-color: #191919;
position: absolute;
left: 5%;
margin-top: 20px;
}
.header .text a {
color: #77A0AC;
font-size: 31px;
padding: 0px 15px 0px;
text-decoration: none;
}
.text:hover {
cursor: pointer;
}
.menu-container {
position: absolute;
left: 5%;
right: 5%;
bottom: 0;
width: 90%;
}
.menu {
font-size: 16px;
}
.menu a {
background-color: #660066;
color: #76ff03;
text-align: center;
display: block;
margin: 0;
text-decoration: none;
}
.content {
left: 10%;
top: 15%;
right: 10%;
position: absolute;
}
.box {
background-color: #191919;
width: 100%;
position: absolute;
padding: 15px 15px 15px;
}
.slider_wrapper {
width: 100%;
height: 40vw;
overflow: hidden;
position: relative;
}
.slider {
position: absolute;
width: 100%;
}
.slider div {
overflow: hidden;
position: absolute;
width: 100%;
}
.slider img {
width: 100%;
height: 40vw;
}
.caption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #ffffff;
width: 100%;
font-size: 36px;
padding: 1.6rem;
cursor: default;
}
.slider_objects {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: default;
}
.slider_btn {
pointer-events: auto;
opacity: 0;
}
.slider:hover .slider_objects .slider_btn {
opacity: 1;
}
.slider_btn:hover {
background-color: #000000;
color: lime;
opacity: 1;
}
.slider_wrapper:hover .slider_btn {
opacity: 1 !important;
display: block !important;
}
.slider_btn:hover:after {
display: block;
position: absolute;
border-radius: 50%;
width: 10%;
height: 10%;
background: none !important;
}
.prev_btn,
.next_btn {
width: 10px;
height: 10px;
position: absolute;
top: calc(50% - 25px);
border-radius: 50%;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
z-index: 2;
background: none !important;
cursor: pointer;
}
.prev_btn::before,
.next_btn::before {
content: "";
background-color: #00000080;
border-radius: 50%;
position: absolute;
inset: 0 0;
z-index: -1;
transform: translate(-27.5%, -20%);
}
.prev_btn:hover::before,
.next_btn:hover::before {
background-color: #000;
}
.prev_btn {
color: #ffffff;
left: 50px;
}
.next_btn {
color: #ffffff;
right: 50px;
}
.slider_img_wrapper>a>img {
cursor: default;
}
.slider_list_wrapper {
width: calc(100% - 40px);
position: absolute;
bottom: 3vw;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style-type: none;
}
.slider_list {
width: 15px;
height: 15px;
margin: 5px 10px 0;
background-color: #323232;
border: 2px solid #ffffff;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 0 3px 1px #000000;
cursor: pointer;
pointer-events: auto;
}
.active_slide {
background-color: #ffa500;
}
.sticky {
width: 90%;
position: fixed;
left: 5%;
top: 0;
z-index: 100;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/mobile-json-carousel/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<body>
<div class="header-container">
<div class="header">
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
</div>
<div class="menu-container">
<div class="menu">
<a>MENU</a>
</div>
</div>
</div>
<div class="content">
<div class="box">
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
<div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>
</div>
</div>
</body>

How would I approach adding automation to a slideshow?

I built a JS slideshow with clickable indicators. I would like for my slideshow to play automatically, while maintaining the functionality of the indicator buttons.
In the code example below, I attempted to add a setTimeout() method to change the image every 2000ms, but it seems to not be working. What would be the best approach to change the JS so I have some automation? I also attempted to use the setInterval method with no luck. I will provide the code below:
Thank you in advance for the help/tips/and advice
var editorialSlideIndex = 1;
showEditorialSlides(editorialSlideIndex);
//Next/previous controls
function plusSlides(n) {
showEditorialSlides(editorialSlideIndex += n);
}
//Thumbnail image controls
function currentSlide(n) {
showEditorialSlides(editorialSlideIndex = n);
}
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(showEditorialSlides, 2000); // Change image every 2 seconds
}
/*Slideshow Container */
.editorial-slideshow-container {
padding-top: 15px;
position: relative;
margin: auto;
}
/*Default Hide Images*/
.editorial-slideshow {
display: none;
}
/*Next and previous buttons*/
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -34px;
padding: 10px;
color: white;
font-weight: bold;
font-size: 34px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background-color: rgba(0, 128, 115, .5);
}
/* Position "next button" */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, background color */
.prev:hover,
.next:hover {
background-color: rgba(0, 128, 115, .8);
}
/* Caption text
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
Number text (1/3 etc)
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 15;
}
*/
/* The slideslideDotInd/bullets/indicators */
.slideDotInd {
cursor: pointer;
height: 15px;
width: 15px;
margin: 15px 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active-slider,
.slideDotInd:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: .25s;
}
#-webkit-keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#keyframes fade {
from {
opacity: .8
}
to {
opacity: 1
}
}
#media only screen and (max-width: 425px) {
#CGConainer .banner-title H1 {
line-height: 50px;
}
}
#media only screen and (min-width: 768px) {
.editorial-slideshow-container {
width: 75%;
/*Max width is 576px*/
}
}
#media only screen and (min-width: 1024px) {
.editorial-slideshow-container {
width: 50%;
}
}
<div class="editorial-slideshow-container">
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-1.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-2.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-3.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-4a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-5a.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-6.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-7.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-8.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-9.jpg" style="width:100%">
</div>
<div class="editorial-slideshow fade">
<img src="https://storage.googleapis.com/img.triggermail.io/hammacher/slider-10.jpg" style="width:100%">
</div>
<p class="prev" onclick="plusSlides(-1)">‹</p>
<p class="next" onclick="plusSlides(1)">›</p>
</div>
<div style="text-align:center">
<span class="slideDotInd" onclick="currentSlide(1)"></span>
<span class="slideDotInd" onclick="currentSlide(2)"></span>
<span class="slideDotInd" onclick="currentSlide(3)"></span>
<span class="slideDotInd" onclick="currentSlide(4)"></span>
<span class="slideDotInd" onclick="currentSlide(5)"></span>
<span class="slideDotInd" onclick="currentSlide(6)"></span>
<span class="slideDotInd" onclick="currentSlide(7)"></span>
<span class="slideDotInd" onclick="currentSlide(8)"></span>
<span class="slideDotInd" onclick="currentSlide(9)"></span>
<span class="slideDotInd" onclick="currentSlide(10)"></span>
</div>

It's such a small change.
The way you called setTimeout is wrong.
function showEditorialSlides(n) {
var i;
var slides = document.getElementsByClassName("editorial-slideshow");
var slideDotInd = document.getElementsByClassName("slideDotInd");
if (n > slides.length) {
editorialSlideIndex = 1
}
if (n < 1) {
editorialSlideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < slideDotInd.length; i++) {
slideDotInd[i].className = slideDotInd[i].className.replace(" active-slider", "");
}
slides[editorialSlideIndex - 1].style.display = "block";
slideDotInd[editorialSlideIndex - 1].className += " active-slider";
setTimeout(() => showEditorialSlides(editorialSlideIndex = (n+1)), 2000); // Change image every 2 seconds
}
And that was the reason your function was being called incorrectly.
EDIT: I forgot to mention the reason. There was no way JavaScript knew what parameters you were passing to the function when you're trying to recurse.
You can try it out in the fiddle

How to create image gallery with jquery

I've jquery carousel(cycle2) and popup (lightgallery) and you will see my carousel on example and this example works very well and as I expect
$(document).ready(function(){
function generateSlider(){
$('.mySlideShow').cycle({
next: "#single-right",
pauseOnHover: true,
log: false,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>",
prev: "#single-left",
slides: "img[data-hidden='false']"
});
}
generateSlider();
$(".filter li").on("click",function(){
var activeId = $(this).attr("id");
if(activeId == "show-all"){
$("img[data-id]").attr("data-hidden", "false");
} else {
$("img[data-id]").attr("data-hidden", "true");
$("img[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$('.mySlideShow').cycle('destroy');
generateSlider();
});
});
.single-gallery{
width:800px;
overflow:hidden;
position:relative;
}
.cycle-slideshow img {
width:100%;
height:494px;
max-width:100%;
}
#single-pager a img {
width: 49.3px !important;
height:49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top:0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type:none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
img[data-hidden="true"]{
display: none;
}
<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet"/>
<div class="single-gallery">
<div class="mySlideShow">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-id="sports" data-hidden="false">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sunny-day-lightbox.jpg" data-id="naturel" data-hidden="false">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-id="animals" data-hidden="false">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/sakura%20trees-lightbox.jpg" data-id="animals" data-hidden="false"/>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-id="animals" data-hidden="false"/>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-id="animals" data-hidden="false"/>
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-id="sports" data-hidden="false"/>
<div id="single-pager" class="center external"></div>
<div id="single-next-prev">
<span id="single-left">Prev</span>
<span id="single-right">Next</span>
</div>
</div>
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
<li id="show-all">All</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
but if I wrap my èach image with a than my filtering is not working as you see on example - please click to see example
I'm wondering what's wrong with my code ?

Okay, the pager got messed up, but here's what I got:
Change slides: to "a[data-hidden='false']"
Replace every instance of img to a in the .click function.
img[data-hidden="true"]{ display: none; to } to `a[data-hidden="true"]{ display: none; to }
replace pagerTemplate: "<a href='#'><img src='{{src}}' width=48 height=48></a>" with pagerTemplate: "<a href='#'><img src='{{children.0.src}}' width=48 height=48></a>"
$(document).ready(function() {
function generateSlider() {
$(".mySlideShow").cycle({
next: "#single-right",
log: false,
fx: "fade",
caption: ".cycle-caption",
captionTemplate: "{{title}}",
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<a href='#'><img src='{{children.0.src}}' width=60 height=60></a>",
prev: "#single-left",
slides: "a[data-hidden='false']"
});
}
generateSlider();
$(".filter li").on("click", function() {
var activeId = $(this).attr("id");
if (activeId == "show-all") {
$("a").attr("data-hidden", "false");
} else {
$("a").attr("data-hidden", "true");
$("a[data-id = '" + activeId + "']").attr("data-hidden", "false");
}
$(".mySlideShow").cycle("destroy");
generateSlider();
});
$(" .mySlideShow").lightGallery({
exThumbImage: "data-exthumbimage",
download: false,
thumbnail: true,
loadYoutubeThumbnail: true,
youtubeThumbSize: "default",
loadVimeoThumbnail: true,
vimeoThumbSize: "thumbnail_medium"
});
});
.single-gallery {
width: 800px;
overflow: hidden;
position: relative;
}
.cycle-slideshow img {
width: 100%;
height: 494px;
max-width: 100%;
}
#single-pager a img {
width: 49.3px !important;
height: 49.3px !important;
border: 1px solid #fff;
}
#single-pager a.cycle-pager-active img {
opacity: 0.4;
}
#single-left,
#single-right {
position: absolute;
top: 50%;
z-index: 1000;
background: rgba(255, 255, 255, .8);
padding: 12px;
cursor: pointer;
}
#single-left {
left: 0;
}
#single-right {
right: 0;
}
.filter {
position: absolute;
z-index: 1000;
right: 0;
top: 0;
padding: 0;
color: #FFF;
background: rgba(255, 255, 255, 0.6);
padding: 10px 30px;
}
.filter li {
list-style-type: none;
cursor: pointer;
display: inline-block;
background: rgba(0, 0, 0, .6);
padding: 5px;
}
a[data-hidden="true"] {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/lightgallery/latest/css/lightgallery.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.3.9/js/lightgallery.min.js"></script>
<div class="single-gallery" id="single-gallery">
<div class="single-gallery-carousel">
<div class="slideshow-area">
<ul class="filter">
<li id="sports">Sports</li>
<li id="naturel">Naturel</li>
<li id="animals">Animals</li>
<li id="show-all">All</li>
</ul>
</div>
<div class="mySlideShow">
<a data-exthumbimage="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg" data-id="naturel" data-hidden="false" data-src="http://cdn.anitur.com.tr/resimler/normal/2014-02/tur_kuba_CP62I36hoYGMpFFRiN78.jpg">
<img src="https://sachinchoolur.github.io/lightGallery/static/img/12.jpg">
</a>
<a class="video" data-hidden="false" data-id="naturel" data-src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg" href="https://vimeo.com/1084537">
<img src="http://nerdist.com/wp-content/uploads/2016/06/The-Evolution-of-Pixar.jpg">
</a>
<a data-exthumbimage="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg" data-hidden="false" data-id="naturel" data-src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
<img src="http://betacontent.anitur.com.tr/web/images/h494/2017-03/otel_aurum-didyma-spa-beach-resort_sReNOBXcinbZI7lNGf3x.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/tulips-lightbox.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/golden-wheat-field-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/night-in-the-city-lightbox.jpg"></a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg" data-hidden="false" data-id="animals" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/dandelion-lightbox.jpg">
</a>
<a data-exthumbimage="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg" data-hidden="false" data-id="sports" data-src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
<img src="https://amazingcarousel.com/wp-content/uploads/amazingcarousel/7/images/lightbox/daffodil-flowers-lightbox.jpg">
</a>
</div>
</div>
<div class="center external" id="single-pager">
</div>
</div>
<div id="single-next-prev">
<span class="ani-icon-chevron-pointing-to-the-left ani-cycle-control" id="single-left"></span> <span class="ani-icon-right-chevron ani-cycle-control" id="single-right"></span>
</div>
</div>
CodePen

Why does this jQuery slider work vertically but not horizontally?

I have a slider that has a main image area and small thumbs on the side. When you click on a thumb it loads that image in a larger size in the main image area. There are also next and previous links. If there are more thumbs then there is space for to show then only 13 are shown and the rest hidden. When you click on "next" all the thumbs move up one causing one more to be exposed. When you click "previous" all the thumbs move down one causing one more previous thumb to be exposed. That's how it works with vertical scrolling, and here's the code for it:
HTML:
<div class="gallery">
<div id="gallery_actions">
<div class="gallery_count"><span class="counter">3</span> / 17</div>
<div class="view_slideshow"><label><input class="slideshow_toggle" type="checkbox">Start slideshow</label></div>
</div>
<div class="carousel">
<div class="arrow arrow_previous"></div>
<div class="carousel_region">
<div class="carousel_subregion">
<ul class="carousel_slide">
<li class="thumb" id="carousel_thumb_5626316" data-json="{'id':'5626316'}">
<img src="shark_files/fb1490b2aa8dcf9a64861f9dcab86ca1.jpg" alt="Picture: 1920315" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_4034028" data-json="{'id':'4034028'}">
<img src="shark_files/fa41b5ff4a148ac68e65d1dcfd2c5f6a.jpg" alt="Picture: 1911579" height="30" width="40">
</li>
<li class="thumb selected" id="carousel_thumb_4063804" data-json="{'id':'4063804'}">
<img src="shark_files/b2850e2656bd41efe09f4df2cfadecc3.jpg" alt="Picture: 1914572" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3903274" data-json="{'id':'3903274'}">
<img src="shark_files/d2e254b960b5dbb854b905c67ff68e1b.jpg" alt="Picture: 1901129" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_99834" data-json="{'id':'99834'}">
<img src="shark_files/71389663b3c371be9ad953273a0894c4.jpg" alt="Picture: 1704362" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3119931" data-json="{'id':'3119931'}">
<img src="shark_files/eca402b67c9126340540aa1c62bc83c3.jpg" alt="Picture: 1792796" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_3955105" data-json="{'id':'3955105'}">
<img src="shark_files/2244914dee3f7e23ca5a2a1103a29934.jpg" alt="Picture: 1905495" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6254076" data-json="{'id':'6254076'}">
<img src="shark_files/39fa72602391c40bc3844d07d68e4e57.jpg" alt="Picture: 1942819" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_61197" data-json="{'id':'61197'}">
<img src="shark_files/e194fd0bcb8c652e56321d3850fb6ca0.jpg" alt="Picture: 3685" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_58516" data-json="{'id':'58516'}">
<img src="shark_files/143f53f536ae4b12b82b615f37de2313.jpg" alt="Picture: 16870" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42148" data-json="{'id':'42148'}">
<img src="shark_files/6fdbf9d94d8c325c0fc2ccbbf0ef10b9.jpg" alt="Picture: 1608493" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_43248" data-json="{'id':'43248'}">
<img src="shark_files/296697046f7d5ade52b9c0c8330894a8.jpg" alt="Picture: 1596140" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_44795" data-json="{'id':'44795'}">
<img src="shark_files/4fcd7df720d497ddfca91e23c812dcc6.jpg" alt="Picture: 148030" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_47611" data-json="{'id':'47611'}">
<img src="shark_files/6a7fd11395364258f7ba78b40756c073.jpg" alt="Picture: 105834" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_56197" data-json="{'id':'56197'}">
<img src="shark_files/53469c1aca114944f1b380cd17dff886.jpg" alt="Picture: 39682" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_6564813" data-json="{'id':'6564813'}">
<img src="shark_files/2d2bc3ff87b089141f2cebc318d7e9c0.jpg" alt="Picture: 1955011" height="30" width="40">
</li>
<li class="thumb" id="carousel_thumb_42795" data-json="{'id':'42795'}">
<img src="shark_files/1e2f946e9a0b4fd42399569761c0820b.jpg" alt="Picture: 1601015" height="30" width="40">
</li>
</ul>
</div>
</div>
<div class="arrow arrow_next"></div>
</div>
<div id="pic_main"><img style="position: relative; top: 131.5px;" src="shark_files/8d1ff92265c0e162dcc35fb49de19ae6.jpg" alt="Picture: 11896846" height="337" width="450"></div>
<div class="pic_info">
<div class="title">Title goes here</div>
<div id="description" class="description">Description goes here</div>
</div>
</div>
CSS FOR VERTICAL SLIDE:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 40px;
height: 450px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 40px;
height: 450px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
JQUERY PLUGIN CODE:
(function($) {
if(typeof($.fn.scrollTo) == 'function') {
$.fn.slideShow = function(options) {
var defaults = {
axis: 'y',
click: function() { },
counter: '.counter',
left: '.arrow_previous',
increment: 1,
mouseover: function() { },
mouseout: function() { },
next: function() { },
previous: function() { },
region: '.carousel_region',
right: '.arrow_next',
selected: '.thumb:first',
selected_class: 'selected',
slideshow_status: false,
slideshow_time: 6,
slideshow_toggle: '.slideshow_toggle',
speed: 400,
subregion: '.carousel_subregion',
thumb: '.thumb'
};
var options = $.extend(defaults, options);
return $(this).each(function() {
var region = $(options.region, $(this));
var subregion = $(options.subregion, $(this));
var left = $(options.left, $(this));
var right = $(options.right, $(this));
var slideshow = $(options.slideshow_toggle);
var timeout;
var dimension;
if(options.axis == 'x') {
dimension = region.find(options.thumb).eq(0).outerWidth();
} else if(options.axis == 'y') {
dimension = region.find(options.thumb).eq(0).outerHeight();
}
var update_counter = function() {
var index = $(region).find(options.thumb).index($(region).find(options.thumb + '.' + options.selected_class));
$(options.counter).text(index + 1);
};
$(this)
.bind('next', function(event) { region.trigger('next'); })
.bind('previous', function(event) { region.trigger('previous'); });
region
.bind('next', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':last', region).hasClass(options.selected_class)) {
var next = region.find(options.thumb).index(region.find('.' + options.selected_class)) + options.increment;
if(next + options.increment > region.find(options.thumb).length) {
next = region.find(options.thumb).length - options.increment;
}
var next_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(next);
if(next_thumb.length == 0) {
next_thumb = region.find(options.thumb + ':last');
}
next_thumb.addClass(options.selected_class);
subregion.scrollTo(next_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.next(event);
}
})
.bind('previous', function(event) {
event.stopPropagation();
if(!$(options.thumb + ':first', region).hasClass(options.selected_class)) {
var prev = region.find(options.thumb).index(region.find('.' + options.selected_class)) - options.increment;
if(prev < 0) {
prev = 0;
}
var prev_thumb = region.find(options.thumb).removeClass(options.selected_class).eq(prev);
if(prev_thumb.length == 0) {
prev_thumb = region.find(options.thumb + ':first');
}
prev_thumb.addClass(options.selected_class);
subregion.scrollTo(prev_thumb, (options.speed * options.increment), { axis: options.axis });
update_counter();
return options.previous(event);
}
})
.find(options.thumb)
.bind('click', function(event) {
// Move Selected Class
region.find('.' + options.selected_class).removeClass(options.selected_class);
$(this).addClass(options.selected_class);
// Update Counter
update_counter();
return options.click(event);
})
.bind('mouseover', function(event) {
return options.mouseover(event);
})
.bind('mouseout', function(event) {
return options.mouseout(event);
});
left.click(function() {
return region.trigger('previous');
});
right.click(function() {
return region.trigger('next');
});
slideshow
.attr('checked', options.slideshow_status)
.click(function() {
if($(this).is(':checked')) {
region.trigger('next');
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
} else {
clearInterval(timeout);
}
});
if(options.selected !== false) {
$(region).find(options.selected).click();
subregion.scrollTo($(options.selected, region).eq(0), options.speed);
}
if(options.slideshow_status) {
timeout = setInterval(function() { region.trigger('next'); }, options.slideshow_time * 850);
}
});
};
}
})(jQuery);
I want to change the behavior a bit and have the images scroll horizontally instead of vertically. I see that one of the plugin options is axis. I changed that value to "x" instead of "y". and changed the css to this:
.gallery {
background: #000;
color: #fff;
padding: 10px;
}
.gallery .gallery_count {
float: right;
font-size: 14px;
font-weight: bold;
}
.gallery #gallery_actions .gallery_count { float: right; }
.carousel {
float: right;
width: 125px;
border: 1px solid green;
width: 490px;
}
.carousel .arrow {
display: block;
height: 20px;
background: url(../sprite_slideshow_controls.png) no-repeat top left;
width: 46px;
height: 30px;
}
.carousel .arrow_previous {
background-position: 0 0;
}
.carousel .arrow_previous:hover {
background-position: 0 -30px;
cursor: pointer;
}
.carousel .arrow_previous:active {
background-position: 0 -60px;
}
.carousel .arrow_next {
background-position: -46px 0;
}
.carousel .arrow_next:hover {
background-position: -46px -30px;
cursor: pointer;
}
.carousel .arrow_next:active {
background-position: -46px -60px;
}
.carousel .carousel_region {
overflow: hidden;
width: 490px;
height: 30px;
}
.carousel .carousel_subregion {
overflow: hidden;
z-index: 1000;
position: relative;
width: 490px;
height: 30px;
}
.carousel ul {
margin: 0;
padding: 0;
list-style: none;
z-index: 500;
}
.carousel ul li {
float: left;
overflow: hidden;
margin: 0 0 5px 0;
opacity: .5;
filter: alpha(opacity = 50);
background: #ccc;
width: 40px;
height: 30px;
}
.carousel ul li:hover {
opacity: .8;
filter: alpha(opacity = 80);
}
.carousel ul li.selected, .carousel ul li.selected:hover {
opacity: 1;
filter: alpha(opacity = 100);
}
.carousel .thumb img {
cursor: pointer;
}
#pic_main {
text-align: center;
background: #000;
border: 1px solid red;
width: 600px;
height: 450px;
}
#pic_main img {
margin: 0 auto;
display: block;
}
#pic_main img.loading {
display: block;
position: relative;
top: 280px;
}
#pic_main img:first {
display: block;
}
Otherwise the HTML and rest of the jQuery is exactly the same. It's not working however. When you click "next" the images don't slide left one causing the next in the list to be exposed.
I'm not sure if this is a jQuery or a CSS issue but I spent all day yesterday trying to figure it out with no luck. Can anyone please help?