Trying to make the arrows stick to the image/slide border and not at the carousel border! I played a long with almos all the parameters and custom css but nothing worked
Arrows at the middle of the carousel, at slide borders
I worked with positions, flex-shrink and much more css but it wasnt working, also I tried to wrap the carousel
Related
I want to make a slick slider showing 3 slides , I want the right slide aligned with the container to the right and the left slides aligned to the left, so the margin between slides need to be dynamic if I change screen width.
The problem with the example I have is if I add margin between slides they will be no more aligned with the arrows
Without a code example it's really hard to help to get an idea.
In css maybe you could use calculate?
https://css-tricks.com/a-couple-of-use-cases-for-calc/
I have slick slider with adaptiveHeight attribute set to false. So, if i have small image in slick container first slide - it will be centered vertically, and left areas will be filled with background color (like in this image).
How can i calculate slick slider area height before slick is loaded to prevent 'jumping' on load? Do anyone know, how slick calculates image height and width in slick container? Any ideas?
You could wrap slick with a plugin like ImagesLoaded to ensure your images have a height before initialising Slick. If you don't want the flash of unstyled images this will create, you'll need to apply some styles to hide them initially (e.g. position them absolutely off the left side of the screen) and then remove these styles when your images are loaded, something like:
$('#slider').imagesLoaded( function() {
// remove your hiding class
// initialise slick
});
I am using the bxslider in my responsive design. When I use the touch/swipe by my phone the slider slides correctly to the next two slides. This happens as well when you slide a bit too far.
I am wondering if it is possible to disable this function and to be able to slide free as you position the slides by yourself or a way to slide quickly to the last slide?
The website is http://teothemes.com/wp/Teo/ and the section I'm reffering is the Portfolio section with the filterable portfolio. On hover on each element, two icons show up http://prntscr.com/1a1wxx
If you click on the "+" one(which means extend), the slider is totally messed up, http://prntscr.com/1a1x00 . I don't understand why it takes all the images in just one slide. And, it happens just on the first time I load a portfolio, if I try it for other portfolio items after I open the first ope, it works just fine.
I've tried setting the position to relative, thought it's a css problem with margins, padding, the width of the top container, I set it to 100%, but it just doesn't want to work.
I think the problem is with some of the default CSS code for the flexslider container, but I'm not sure what exactly to check.
Any help is appreciated.
I am trying to implement a twitter bootstrap carousel. Except, I need to put content (containers, rows, spans, copy) in the slides rather than a big image. But, I do have a big image (1366x450) to display as the background of each slide, scalable/responsively.
I can't quite find a way to do this so that the background image scales correctly and the slide displays at the responsive sizes needed. I need quite a bit of padding top and bottom of the content.
Any ideas where to start?