Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,176,125 members, 7,896,809 topics. Date: Sunday, 21 July 2024 at 10:16 PM

Has Anyone Tried Creating A Responsive Carousel With Vanilla JS? - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Has Anyone Tried Creating A Responsive Carousel With Vanilla JS? (540 Views)

Breaking Bad API With Vanilla Javascript / Elearning Website Development: Top 12 Tips For Creating A Successful Marketplace / Take Your Web Development Skill/Career To The Next Level By Creating A Web App (2) (3) (4)

(1) (Reply) (Go Down)

Has Anyone Tried Creating A Responsive Carousel With Vanilla JS? by tensazangetsu20(m): 7:54pm On Sep 22, 2020
I am playing around with javascript and trying to build a carousel. I enabled touch events and the whole thing works perfectly except that you can slide past the first and last element in the track. I have tried trying to prevent this but I have been unable to. Has anyone built something similar to this before?

The link to the code on jsfiddle can be found through this link

https://jsfiddle.net/jqs62tp1/

2 Likes

Re: Has Anyone Tried Creating A Responsive Carousel With Vanilla JS? by Karleb(m): 8:11pm On Sep 22, 2020
Do you mean you "can't" slide past the first and last picture?

Is that's the case?

Try changing your slindeIndex or whatever variable iterating through the images array to the first image when the loop gets to the last element during forward iteration.

Also, during backwards iteration, the first image should be changed to the last when you get to it.

//forward iteration

if(slideIndex > images.length) slideIndex = images[0]


//backwards iteration
if(slideIndex < images[0]) slideIndex = images[images.length - 1]

Can't visit the link I'm on free mode.

1 Like

Re: Has Anyone Tried Creating A Responsive Carousel With Vanilla JS? by tensazangetsu20(m): 11:50pm On Sep 23, 2020
Karleb:
Do you mean you "can't" slide past the first and last picture?

Is that's the case?

Try changing your slindeIndex or whatever variable iterating through the images array to the first image when the loop gets to the last element during forward iteration.

Also, during backwards iteration, the first image should be changed to the last when you get to it.

//forward iteration

if(slideIndex > images.length) slideIndex = images[0]


//backwards iteration
if(slideIndex < images[0]) slideIndex = images[images.length - 1]

Can't visit the link I'm on free mode.

I fixed it o but in a totally different way. Using the overflow overscroll feature and adding events to activate that scroll.
Re: Has Anyone Tried Creating A Responsive Carousel With Vanilla JS? by Gokoyer1401: 6:51am On Sep 24, 2020
Can you help me with a js code?
chidemavian:



There are other things you may do as well


Over here is a link to a thrift app.


This app administers


Daily contributions
Soft loans disbursement
OTP
SMS alert
Email notification
And a robust admin interface


Here is a link

http://thriftplus.pythonanywhere.com/login/



If u need any detail

Reach me


08134720874

Blessing
Re: Has Anyone Tried Creating A Responsive Carousel With Vanilla JS? by haybhi1(m): 3:07am On Oct 10, 2020
Hello Tenza,
Good day to you, I've been following you since the day of your comment on the "ten years after graduation thread..."
Please, I beg you in the name of God or whatever else you rather believe in, please, provide me with a way to get across to you on WhatsApp.
Please, I promise and vow that it will not create any discomfort to you to know me! I want to only seek for direction.
I reiterate I won't be a burden to you.
Please, abeg����

(1) (Reply)

Drupal To Wordpress Migration Guide For Merchants / Laravel Vuejs Chat App / I Saw This On My Journey Towards Healthcare Data Science

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 12
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.