I am working on a template which is bootstrap based. I need to set up a full width slick slider, but its initial state should start at the left edge of the content container, and then progressively slider further left.
I tried to represent what needs to happen on the image below. The black border represent the viewport, the red border represent the content container. The first row is the initial state, the other 2 rows show the position of the slider after clicking the "prev" arrow:
Is this possible? And if so, how?
Thanks,
Lol, I just had to do that same thing last week. I set slidesToShow:1 and slidesToScroll:1. I also have variableWidth:false, though I'm not sure if that played into it.
The next step is to set a width on your slides in CSS to keep them from resizing out to fill the space:
JS
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: false
}
CSS
/*Just to make it not full width, for this example*/
.slider{
width:800px;
margin:0 auto;
}
/*Edit, forgot this important bit. This keeps the other slides visible*/
.slick-list {
overflow: visible;
}
.your_slide {
width: 280px!important;
height: 345px!important;
}
Related
I have three images to be shown on a page and I want the image which comes in center by sliding should have margin-top that means my center image should be little down then the other two images which are on both the sides of the image.
If you are using centerMode:true, there's a .slick-center class applied to the element in the middle. You can create a css rule like:
.slick-center {
margin-top:0.5%;
}
If you don't have centerMode:true on, and for some reason you can't enable it, you can always target the .slick-current class (which will be the first of the three slides that are showing, and then target it's adjacent sibling like this:
.slick-current + .slick-slide {
margin-top: 20px;
}
However, if both options are available to you, I would suggest going with Tutch's answer as it scales better in cases where you might increase/decrease slide counts dynamically.
I use Slick in my project and I need to center two slides. Unfortunately centerMode option works only with odd numbered slidesToShow counts. I tried to center active slides by CSS but without effects.
Do you know any solution? Thank you in advance!
Edit:
Example of my carousel: https://jsfiddle.net/lukaszflorczak/y7t64oqs/.
I want to have 1 centered item on the smallers screens, next 2, 3 etc. Not active slides have less opacity.
Slick Carousel center Mode with two slides is possible using variableWidth, you have to set width for each slide. After that you have to move slick-track half width of the slick slide.
Working fiddle here:
Slick slide - two slides in center mode
Slick Carousel slides can be centered by setting the horizontal margins of .slick-track to auto in addition to using the centerMode attribute.
.slick-track {
margin-left: auto;
margin-right: auto
}
When the user .mouseenters the .container i would like the link to fadeIn, and when the user .mouseleaves the .container i would like the link to fadeOut. So far this is working. How can i slow down the transition? Using 5000-10000 seems to be too fast still.
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
// After #facial slides to center it delays for 500ms.
.delay(500)
// After #facial delays it expands it's width to 100% of .container.
.animate({right: 0, width: '100%'});
// show the span link at bottom as a H2 with center aligned.
$('span').fadeIn('slow');
});
$('.container').mouseleave(function(){
// Mouse leaves .container, and span fades out slowly.
$('span').css('display','none');
$('span').fadeOut('slow');
// Mouse leaves the .container, #facial shrinks it's width to 50%.
// #facial slides back to right of .container.
$('#facial').animate({right: 0, width: '50%'});
});
});
Here is my Demo
the code works but is slow for display span
$('span').fadeIn(1000);
Your issue (at least in JSfiddle code) is with:
display: none;
Try setting display to block and opacity to 0.
This is a styling pitfall many people encounter as items switching display during animations will suddenly pop out without those set animations. I believe this is the effect that you are looking for:
https://jsfiddle.net/sy4pv8z3/52/
Note: The time in fadeIn & fadeOut functions are in ms (milliseconds). You should be able to achieve a nice transition with 500ms and less.
My page has a 1000px container for the header(above the red box in below image) and the content(below the red box in the image attached). Those containers are fixed width. But I need to setup a image slider that will be displaying the images in full width.
I mean, I will be including a much wider image. Say, 1800x200 px. So, if the user's screen resolution(width) is less than or equal to 1000px, then the middle portion of the image would be displayed and the image slider should be 1000x200 px in size(resized). But if say the user's screen resolution is 1300(width), then the image slider should be resized displaying the center portion of the image and the slider container would be of size 1300x200 px in size!
Since there are lots of jQuery plugins already available, I thought of not to reinvent the wheel. So tried many jquery sliders. But none of them seems to be meeting my above needs. Or am I missing some settings in those sliders that I tried?
Any suggestions?
Maybe add an extra outer container? Then center the 1000px container within the outer one.
Then when you resize the window the image slider will respond to the outer container and the inner container stays centered.
outerContainer {
width: 100%;
.....
}
innerContainer {
width: 1000px;
margin: auto; /*or left:50% right:50%*/
}
you have to wrap all div in .wraaper div and define width 100%.
.wrapper{width:100%;}
and in inner div you have to define section using an
.inner(width: 1000px;)
where you need 100% slider dont use this .inner class.
this is help for you.
I need to slide a background when clicking the "next" arrow, and the "previous" arrow - right now the background is in the #container element - However, that doesnt work - I've tried putting the background on the ul#slider element - But that doesnt work either...
What i need is that the background will be slider as much as the liinside the slider...
Any suggestions on how to do that ?
You can see the project here: http://www.i-creative.dk/Slider/
thx
I've built something like what you're asking for, and it's a total pain.
The problem is, you're talking about having a different background image, the size of the page, for EVERY slide.
2 options are:
1: Have one BIG background image, with all the background aligned horizontally, and animate the css background-position when you change a div, to keep things matching. This ahs the advanatage that only one image needs to be downloaded, but it will be big.
Problems are: you see all the other images if you jump multiple steps at once;
it requires that you use a fixed width;
it's a pain if you want to change the background for just one slide;
Preload the background for the next slide on a div which is a sibling of container but has a higher z-index. Use jquery to slide this over the existing background, from the appropriate side.
The good thing about this method is that you can use css to make the background image always take up the full-width of the screen, or use a bigger imager and have it centred. See here: http://cksk.com for an example.
Long story short, you won't get this working with an off-the-shelf solution, you'll need to get your hands dirty.
Also, you'll need to spend a hell of a lot of time on optimisation.
Try this css...
#slider {
width: 472px; /* divided the width of the background image by 4 (# of panels) */
height: 570px;
list-style: none;
/* start background after the initial cloned panel: 472px to match panel width */
background: transparent url(../images/background.png) 472px 0 repeat-x;
}
/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
background: transparent url(../images/background.png) 0 0 repeat-x !important;
}
/* Make the background visible */
div.anythingSlider .anythingWindow {
overflow: visible !important;
}
The only problem is that the width of the UL is limited, so when you get to the last panel, the background ends, but reappears once you hit the right arrow.