I’ve created a 3 slide carousel with a jQuery script that enables the carousel to automatically change slide every 9800 milliseconds and also have controls (the next and prev buttons) – Even after a click of the prev/ next button the script loops back into auto. Alongside this, I’ve got indicators(div) to show the current position of the slide. What I’m struggling on is getting a click on the indicator itself to change to the slide at that index as the indicators itself is created in jquery
HTML:
[code]
<div class=”paradiseindexpageCarousel”>
<div class=”controls-banner banner-prev”>
<div class=”controls_banner prev”>
<
</div>
</div>
<div class=”banner_carousel”>
<div class=”item_in_carousel”>
<div style=”background-image:url(https://unsplash.it/1800/1200/?random)” class=”banner-carousel-image”>
</div>
</div
<div class=”item_in_carousel”>
<div style=”background-image:url(https://unsplash.it/1800/1100/?random)” class=”banner-carousel-image”>
</div>
</div>
<div class=”item_in_carousel”>
<div style=”background-image:url(https://unsplash.it/1800/1000/?random)” class=”banner-carousel-image”>
</div>
</div>
</div>
<div class=”banner_overlay”>
</div>
<div class=”controls-banner banner-next”>
<div class=”controls_banner next”>
>
</div>
</div>
<div class=”imageindex_indicator-location”>
</div>
</div>
CSS:
[code]
.paradiseindexpageCarousel {
position: relative;
overflow: hidden;
}
.controls-banner {
position: absolute;
top: 50%;
z-index: 2;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.banner-prev {
left: 0;
padding-left: 2.5em; /* was .75em */
}
.banner-next {
right: 0;
padding-right: 2.5em; /* was .75em */
}
.controls_banner {
font-size: 2.4em;
color: #FFF;
cursor: pointer;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
-webkit-transition: opacity 100ms ease-in-out;
-moz-transition: opacity 100ms ease-in-out;
-o-transition: opacity 100ms ease-in-out;
transition: opacity 100ms ease-in-out;
}
.controls_banner.hover,
.controls_banner:hover {
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=45)”;
filter: alpha(opacity=45);
-moz-opacity: 0.45;
-khtml-opacity: 0.45;
opacity: 0.45;
}
.banner_carousel {
width: calc(100% * 5);
}
.item_in_carousel {
float: left;
width: calc(100% / 5);
}
.item_in_carousel > .banner-carousel-image {
height: 760px;
line-height: 450px;
font-size: 2em;
color: #FFF;
background-size: cover;
background-position: 50% 50%;
}
.imageindex_indicator-location {
bottom: .75em;
left: 50%;
position: absolute;
height: .75em;
line-height: 1;
cursor: default;
z-index: 2;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.index-indicator {
top: 0;
margin-left: 3px;
position: relative;
display: inline-block;
width: .75em;
height: .75em;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
background-color: rgba(255, 255, 255, 0.5);
/*
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
*/
}
.index-indicator:first-child {
margin-left: 0;
}
.index-indicator.selected {
background-color: #FFF;
cursor: auto;
}
.banner_overlay {
width: 100%;
height: 100%;
position: absolute;
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=45)”;
filter: alpha(opacity=45);
-moz-opacity: 0.45;
-khtml-opacity: 0.45;
opacity: 0.45;
}
.banner_overlay {
background: rgb(0, 0, 0) none repeat scroll 0% 0%;
}
jQuery:
[code]
function manageCarousel(a) {
var b = 1e3,
c = 9.8e3,
d = a,
e = “.next”,
f = “.prev”,
g = “.imageindex_indicator-location”,
h = “.index-indicator”,
i = h + “:first”,
j = “.item_in_carousel”,
k = j + “:first”,
l = j + “:last”,
m = $(j).outerWidth(),
n = “-=” + m,
o = “+=” + m,
p = “active”,
q = “disabled”,
r = 1,
s = $(j).length;
function runAutoCarouselLoop(a) {
$(d).hasClass(p) && $(a).each(function() {
timer = setInterval(function() {
$(a).animate({
marginLeft: n
}, b, function() {
$(a).find(l).after($(a).find(k)), $(a).css({
marginLeft: 0
})
}), r == s ? (r = 0, $(h).removeClass(“selected”), $(h).first().addClass(“selected”)) : $(g).find(“.selected”).each(function() {
$(this).removeClass(“selected”).next(h).addClass(“selected”)
}), r = r += 1
}, c)
})
}
function handleCarouselControlClick() {
/* right click function */
$(e).click(function() {
$(d).removeClass(p), clearInterval(timer), $(d).hasClass(q) || ($(d).addClass(q), $(d).animate({
marginLeft: n
}, b, function() {
$(d).find(l).after($(d).find(k)), $(d).css({
marginLeft: 0
})
}), $(g).find(“.selected”).each(function() {
$(this).removeClass(“selected”).next(h).addClass(“selected”)
}), r > s – 1 && (r = 0, $(h).removeClass(“selected”), $(h).first().addClass(“selected”)), r = r += 1, setTimeout(function() {
$(d).removeClass(q)
}, b)), clearTimeout(b), $(d).addClass(p), runAutoCarouselLoop(d)
}),
/* left click function */
$(f).click(function() {
$(d).removeClass(p), clearInterval(timer), $(d).hasClass(q) || ($(d).addClass(q), $(d).find(k).before($(d).find(l)), $(d).css({
marginLeft: n
}), $(d).animate({
marginLeft: o
}, b), $(g).find(“.selected”).each(function() {
$(this).removeClass(“selected”).prev().addClass(“selected”)
}), 5 == r ? r = r -= 1 : 1 == r ? (r = 5, $(h).removeClass(“selected”), $(h).last().addClass(“selected”)) : r = r -= 1, setTimeout(function() {
$(d).removeClass(q)
}, b)), clearTimeout(b), $(d).addClass(p), runAutoCarouselLoop(d)
})
}
$(window).resize(function() {
m = $(j).outerWidth(), n = “-=” + m, o = “+=” + m
}), $(d).addClass(p), $(j).each(function() {
$(g).append(‘<div class=”index-indicator”></div>’)
});
$(h).length;
$(i).addClass(“selected”), $(d).hover(function() {
clearInterval(timer)
}, function() {
runAutoCarouselLoop(d)
}), runAutoCarouselLoop(d), handleCarouselControlClick()
}
manageCarousel(“.banner_carousel”);
I’ve put together the below just to test as I go along but it alert on all three as the first element
[code]
$((h) + “:first-child”).click(function() {
alert(“first-item”);
})
I’m also trying to incorporate touch swipe with/ without jQuery mobile, with it using on(swipeleft and swiperight) doesn’t work
Any ideas, solutions, pointers, tips would be much appreciated. Thanking you in advance