Clever Geek Handbook

Slick - the previous / next arrow stays stuck inside the sliding carousel

Using slick: http://kenwheeler.github.io/slick/

Html

<div class="carsoule" style="overflow:hidden; width: 300px; height: 200px; margin: 0 auto; background:red">
     <div>
          <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
     </div>
     <div>
          <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250">
     </div>
</div>

CSS

.slick-prev, .slick-next {
     height: 55px;
     width: 55px;
}
.slick-prev {
     left: -80px;
     /*plan to add button image*/
}
.slick-next {
     right: -80px;
     /*plan to add button image*/
}

Jsfiddle Demo

Tried overriding, but the previous and next buttons remain stuck inside the carousel. Required to replace css with button images and buttons should be outside the carousel like in the example on the slick website. Couldn't figure out where I went wrong.

Help rate!

+3


source to share


5 answers


UPDATE: $ ('. Caroule'). slickNext (); won't work anymore.

Use $ ('. Caroule'). slick ("slickNext"); instead of this.

https://github.com/kenwheeler/slick/issues/1613

After looking at the css this plugin uses, I noticed I applied to it overflow:hidden

, so your arrows won't show outside of the parent container.

You may be faced with adding an additional rule to the container overflow !important

, however I looked at some methods you can use to start the next / previous slide and it turns out that you can trigger your carousel change slide by clicking on a specific class / id outside of the carousel container ...

Basically, after your carousel (or somewhere on the page if it helps you) add two tags div/button/a/whatever

and add a call class

or id to

to the slider to change its slide using: slickNext()

orslickPrev()

You can wrap everything in a master container, your carousel and these two additional tags and create them however you want.



View demo and the extra js / markup is used below:

<div class='next-button-slick'>
    next please
</div>
<div class='prev-button-slick'>
    prev please
</div>

$('.next-button-slick').click(function(){
    $('.carsoule').slickNext();
});
$('.prev-button-slick').click(function(){
    $('.carsoule').slickPrev();
});

UPDATE 2

If you want to keep the markup and not add unnecessary stuff, you can either remove the inline overflow: hidden rule from the container, or via css using overflow: visible !important

, and set those 2 arrows to position absolute

, and work from there.

Check out the demo and css below:

/*extra stuff*/
.carsoule{
    overflow: visible !important;
}
.slick-prev, .slick-next {
    position: absolute;
    background: red;
}
+7


source 


<div class='next-button-slick'>
    next please
</div>
<div class='prev-button-slick'>
    prev please
</div>

$('.next-button-slick').click(function(){
    $('#portfolio-carousel').slick("slickNext");
});

$('.prev-button-slick').click(function(){
    $('#portfolio-carousel').slick("slickPrev");
 });


+3


source


This should solve your problem,

CSS

body {
    background: #d7d7d7;
}

.carsoule {
    background: yellow;
    margin: 0 auto;
    overflow: visible;
    width: 250px;
}

.slick-prev,
.slick-next {
    height: 55px;
    width: 55px;
}

.slick-prev {
    left: -80px;
    /*plan to add button image*/
}

.slick-next {
    right: -80px;
    /*plan to add button image*/
}

Html

<div class="carsoule">
    <div>
        <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
    </div>
    <div>
        <img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="250" />
    </div>
</div>

The cars had an overflow: hidden, so if you placed it outside, it was hidden.

+1


source


The problem is freezing. Just add the code block below and you will be fine.

.slick-next:hover,
.slick-prev:hover {
    background-color: red;
    color: white;
}

See here for a working example

+1


source


You missed the important slick-theme.css http://kenwheeler.github.io/slick/slick/slick-theme.css . I added this file and tampered with your codes and came up with this solution:

Html

Reinstall your wrapper to include the .slider class with the appropriate fields:

class = "Slider for cars"

Modified CSS

.slick-prev: before, .slick-next: before {red; }

.slick-prev, .slick-next {height: 55 pixels; width: 55 pixels; }

.slick-prev {left: -80px; / we plan to add a button image /}

.slick-next {right: -80px; / we plan to add a button image /}

.slider {margin: 0 80px 0 80px; width: auto; }

0


source






More articles:


All Articles