Archived topic
Image carousel/slideshow tweaks
3 replies · Started by Dorin on July 8, 2022
Hi,
I've created an image carousel using the code here. Kept me from using another plugin, which is always great. So it works, I just want to throw in some extra tweaks that I couldn't do myself. First, I'd like the navigation arrows to be outside the image. And the second one would be a simple slide effect as you flick through the images (instead of the fade one showed in the tutorial). Without any animation or transition, like I have it right now, the images simply pop up as the user clicks the nav arrows.
Any help is greatly appreciated. Thanks.
Hi there,
For the Nav Arrows:
1. Left arrow, change this CSS:
.prev-slider {
margin-left: 10px;
}to:
.prev-slider {
margin-left: -40px;
}2. Right Arrow, change this CSS:
.next-slider {
right: 0;
margin-right: 10px;
}to:
.next-slider {
right: -40px;
}The slide animation effect is not possible with that script. It gets way more complicated, requiring different HTML and more complex Javascript.
As an alternative, until we add Slider / Carousel function to GenerateBlocks, one of our users highly recommends this block slider plugin:
Thanks so much, David. It works.
Looking forward to new blocks being implemented in Generate Blocks. Carousel, and hopefully tabs, will be more than welcome.
Cheers and have a nice weekend.
You're welcome :)
