meerdere slick sliders met resultaten samen

Status
Niet open voor verdere reacties.

backnext

Gebruiker
Lid geworden
29 apr 2016
Berichten
176
Ik probeer op 1 pagina meerdere sliders te plaatsen als bij de slick-slider hier:
https://codepen.io/glebkema/pen/bWRZzB
Hier worden 3 sliders gebruikt. Met telkens 1 resultaat boven de slider.
Nu wil ik de resultaten allemaal bovenaan en naast elkaar. Daaronder komen dan de verschillende sliders onder elkaar.
Iemand een idee?
Hier staat er heel wat uitgelegd maar niet wat ik nodig heb:
http://kenwheeler.github.io/slick/
 
Voor de duidelijkheid hieronder de code die ik gebruik en wil veranderen zoals hiervoor beschreven.
HTML:
<head>
    <meta charset="UTF-8">
    <title>slick</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css'>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css'>
    <link rel="stylesheet" href="../../sp_css/slickstyle.css">
    <style>
        img {
    display: block;
    margin: 0 auto;
}
    </style>
</head>
<body>
   
        <div class="slider slider-products">
            <div>
               1
            </div>
            <div>
               2
            </div>
            <div>
               3
            </div>
        </div>
        <div class="slider slider-nav">
            <div>
                1
            </div>
            <div>
                2
            </div>
            <div>
                3
            </div>
        </div>
        <div class="slider slider-products">
            <div>
                1
            </div>
            <div>
                2
            </div>
            <div>
                3
            </div>
        </div>
        <div class="slider slider-nav">
            <div>
                1
            </div>
            <div>
                2
            </div>
            <div>
                3
            </div>
        </div>
        <div class="slider slider-products">
            <div>
                1
            </div>
            <div>
                2
            </div>
            <div>
                3
            </div>
        </div>
        <div class="slider slider-nav">
            <div>
                1
            </div>
            <div>
                2
            </div>
            <div>
                3
            </div>
        </div>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js'></script>
    <script src="../../sp_js/slickindex.js"></script>
</body>

Code:
var numSlick = 0;
$('.slider-products').each( function() {
  numSlick++;
  $(this).addClass( 'slider-' + numSlick ).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav.slider-' + numSlick
  });
});

numSlick = 0;
$('.slider-nav').each( function() {
  numSlick++;
  $(this).addClass( 'slider-' + numSlick ).slick({
    vertical: false,
    slidesToShow: 2,
    slidesToScroll: 1,
    asNavFor: '.slider-products.slider-' + numSlick,
    arrow: false,
    focusOnSelect: true,
    responsive: [
      {
        breakpoint: 800,
        settings: {
          slidesToShow: 2,
         }
      }
    ]
  });
});

Code:
.slick-arrow {
  display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */
}
.slick-slide {
  background: #c69;
  border: 2px solid #fff;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  outline: none; /* revent the appearance of a tiny gray contour */
  padding: 5px 0;
  text-align: center;
  
}
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; }
.slider:nth-of-type(n+5) .slick-slide { background: #69c; }
.slider-nav {
  margin-bottom: 2px;
}
.slider-nav .slick-current,
.slider-nav .slick-slide:hover {
  cursor: pointer;
  opacity: .7;
}
 
Ondertussen een oplossing gevonden:

Code:
<div class="slider slider-products">
en
Code:
<div class="slider2 slider2-products">
enzovoort
ook benaming "slider2 slider2-products"... toegevoegd aan .js en in .css
Daarna plaats bepaald met "w3-half" ...
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan