How can I create a full-width gallery slider that has no padding/borders/margin. I’m looking to a create a simple horizontal one with 2 arrows which goes through a list of images.
Code: https://codepen.io/anon/pen/mXNzWG
Example: https://i.imgur.com/oXQwkZg.jpg
I need to have multiple images just like it is on the example
I see. So do you have any code we can help you with besides the markup? Or are you asking for library suggestions?
I have an example here which has 6 images per slide I want to only have 4 (as seen in the image example). I’ve tried changing col-sm-6 & col-md-2 but it didnt work. Any idea what I have to change?
Example: https://i.imgur.com/oXQwkZg.jpg
Code: https://codepen.io/anon/pen/xWxZQb
You’d have to set them to col-md-3 then as a row contains 12 columns. But you have to adjust the JS as well; currently, 5 images are getting cloned into each item, but you want only 4… have a look at the for loop!
I’ve changed the for loop but one of the images seems to jump/bug out when clicking ‘next’, ‘prev’
for (var i=1;i<6;i++)
to
for (var i=1;i<4;i++)
Ah yes the CSS is still trying to animate the items by a sixth of the slider width, hence the jumping – so just change that to 25%.
Got it. That works now!
I am going to try and add a popout window to open larger versions of the images when they are clicked. Hopefully its not to difficult.
Thanks alot.
No worries. :-)
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
