slick slider responsive slider align items to corners - javascript

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/

Related

Swiper navigation arrows at slide borders

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

Layout with two sliding side panels

I am trying to figure out how to create a simple mobile first layout with two sliding panels. Basically, if the width of the viewing area is less than 700px I would like the layout to look like this:
This will mostly be for mobile screens and allow the user to click the hamburger menu in the top left to have the left menu slide in to the left, or click the ellipsis in the top right to have the right menu slide in from the left. Seems simple but I want both menus to be fixed so when the main content is scrolled through the menus don't get put up at the top.
Also, when the viewing area is over 700px I want the two menus to show automatically like this:
I was wondering if someone could help me with this real quick. I can't seem to nail it down. I appreciate it.
To achieve the responsive requirement, you could use media queries to set specific CSS styles to the screen size you want.
To achieve the fix top menu bar, you could refer to position:fixed

Owl Carousel overflow only right side

So, I got this going on right now:
I want it to overflow the right side like this
But I can't get it working because I have a container to keep it centered, if I remove it the left side goes all the way to the left, margin and padding doesn't work because I don't know how much I need to align it with the other divs. I tried position absolute and z-index but when I drag the carousel the first element on the left disappears.
Any ideas?
Edit: It should have white space on the left just when it starts, when I drag some item I want the carousel to be full width.
Just add a element right inside your container, within all the slide stuff. And add a total width to it (greater than the container). And add overflow: visible to the centered container.

Bootstrap carousel - different directions for each slide

I have a typical twitter bootstrap carousel with 4 images. I want to change the slide direction in such a way that the first image slides left, the second slides up, the third slides down and the last one slides right. How can I achieve this? Any help is appreciated!

Why the slider is not working?

My aim is to replicate the thumbnails to slide from left to right as per this page:
http://preview.vespercreative.com/citilogic/search_detail.php?pid=P2052
They key thing is I want the thumbnails to be on top. I managed to move the thumbnails on top using css but I can't get it to sroll from left to right.
http://www.iamvishal.com/dev/sites/all/themes/andrewcustom/js/slideshow/index.html
I am using the slideshow script from here
Any help will be highly appreciated.

Categories

Resources