/    Sign up×
Community /Pin to ProfileBookmark

Carousel controls with touch swipe events

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”>
&lt;
</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”>
&gt;
</div>
</div>

<div class=”imageindex_indicator-location”>
</div>
</div>

[/code]

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%;
}
[/code]

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”);
[/code]

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”);
})
[/code]

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

to post a comment

6 Comments(s)

Copy linkTweet thisAlerts:
@nsathauthorJan 27.2021 — Ok so I've adjusted the indicator click and tested it, it works fine but I need a way to check which is the current slide and change it to the slide the indicator was clicked
Copy linkTweet thisAlerts:
@johncarryJan 28.2021 — let me check this.
Copy linkTweet thisAlerts:
@nsathauthorJan 29.2021 — @johncarry#1627297

I've reworked the handleCarouselControlClick() function to show/ indicate which indicator is clicked but I'm just trying to figure the logic to find the current slide and animate it the slide by indicator

If it helps:

<i>
</i> 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 &gt; s - 1 &amp;&amp; (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")
}), 3 == r ? r = r -= 1 : 1 == r ? (r = 3, $(h).removeClass("selected"), $(h).last().addClass("selected")) : r = r -= 1, setTimeout(function() {
$(d).removeClass(q)
}, b)), clearTimeout(b), $(d).addClass(p), runAutoCarouselLoop(d)
})

<i> </i> $((h) + ":first-child").click(function() {
<i> </i> alert("1");
<i> </i> })

<i> </i> $((h) + ":nth-child(2)").click(function() {
<i> </i> alert("2");
<i> </i> })

<i> </i> $((h) + ":last-child").click(function() {
<i> </i> alert("3");
<i> </i> })
}
Copy linkTweet thisAlerts:
@SempervivumJan 29.2021 — 
  • 1. This:
    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;
    is a no-go, it makes reading the code a pain. Use meaningful names instead.


  • 2. I recommend not to invent the wheel again but use a plugin like Cycle2 and adjust it to your needs.
  • Copy linkTweet thisAlerts:
    @nsathauthorJan 29.2021 — @Sempervivum#1627379 point taken,

    its just that I've made it this far, hence I'm trying to finish it off. I'm aware that are plenty of plugins available
    Copy linkTweet thisAlerts:
    @rpg2009Jan 30.2021 — Completely agree with Sempervivum regarding variable names, an absolute nightmare to debug.

    A few thoughts..

    I would say shorter lines with chaining in block form would make your code more readable.

    e.g.
    ``<i>
    </i>$(carousel)
    .find(lastSlide)
    .after(
    $(carousel).find(firstSlide),
    )<i>
    </i>
    ``


    Could any of the elements in runAutoCarousel or handleCarousel be extracted out into their own smaller functions? — a number of shorter functions would be an improvement over two lengthy functions.

    Right now your code is unnecessarily obfuscated and almost reads like it's minimized.

    Regarding the slider project itself, a lot of the work can be done in CSS — likely to be simpler and more performant.

    https://www.youtube.com/watch?v=pGHOaY4dhAA

    A search on youtube for 'css slider' comes up with a mix of pure css and css/js examples.
    ×

    Success!

    Help @nsath spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...