Bloccato con il carosello Slick "Modalità centrale"

Question

Ho girato con il carosello di Slick per un paio di ore e non riesco davvero a capire come implementare la "modalità centrale" presente sul sito web di Slick: http://kenwheeler.github.io/slick/

sembra qualcosa di simile a questo:

ho il codice attualmente in vigore, ma non è ancora mi dà quello che voglio:

< link rel = "stylesheet" 
 
type = "text/css" 
 
href = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" > 
 
    < script type = "text/javascript" 
 
src = "http://code.jquery.com/jquery-1.11.0.min.js" > < /script> 
 
<link rel="stylesheet" type="text/css 
 
" href=" 
 
http: //kenwheeler.github.io/slick/css/style.css"> 
 
    < script type = "text/javascript" 
 
src = "http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js" > < /script> 
 

 

 
<script type="text/javascript 
 
"> 
 
$(document).ready(function() { 
 

 
    
 
    $('.center').slick({ 
 
    centerMode: true, 
 
    centerPadding: '60px', 
 
    slidesToShow: 3, 
 
    responsive: [ 
 
    { 
 
     breakpoint: 768, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 3 
 
     } 
 
    }, 
 
    { 
 
     breakpoint: 480, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 1 
 
     } 
 
    } 
 
    ] 
 
}); 
 

 
    $('.single-item').slick({ 
 
     dots: true, 
 
     infinite: true, 
 
     speed: 500, 
 
     slidesToShow: 1, 
 
     slidesToScroll: 1 
 
    }); 
 
\t \t \t \t 
 
}); 
 
</script> 
 

 

 

 
<section id=" 
 
features " class=" 
 
blue "> 
 
<div class=" 
 
center "> 
 
    <div class=" 
 
content "> 
 
     <div class=" 
 
single - item "> 
 
      <div><h3>1</h3></div> 
 
      <div><h3>2</h3></div> 
 
      <div><h3>3</h3></div> 
 
      <div><h3>4</h3></div> 
 
      <div><h3>5</h3></div> 
 
      <div><h3>6</h3></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Se qualcuno ha qualche suggerimento sul perché questo potrebbe non funzionare, apprezzerei molto l'aiuto.

Grazie.

Answer 1

Dopo aver pulito lo snippet per funzionare correttamente (spostato HTML nella parte HTML, rimosso spazio bianco estraneo ed errato), non riesco a capire cosa non funziona con il codice. Forse erano solo errori di sintassi?

La cosa principale che ho notato è che avevi class="single - item" su un elemento che era chiaramente destinato alla classe single-item, poiché era il selettore usato per creare il cursore. Non so se fosse nel tuo codice originale o se fosse stato copiato in modo errato.

$(document).ready(function() { 
 

 
    
 
    $('.center').slick({ 
 
    centerMode: true, 
 
    centerPadding: '60px', 
 
    slidesToShow: 3, 
 
    responsive: [ 
 
    { 
 
     breakpoint: 768, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 3 
 
     } 
 
    }, 
 
    { 
 
     breakpoint: 480, 
 
     settings: { 
 
     arrows: false, 
 
     centerMode: true, 
 
     centerPadding: '40px', 
 
     slidesToShow: 1 
 
     } 
 
    } 
 
    ] 
 
}); 
 

 
    $('.single-item').slick({ 
 
     dots: true, 
 
     infinite: true, 
 
     speed: 500, 
 
     slidesToShow: 1, 
 
     slidesToScroll: 1 
 
    }); 
 
\t \t \t \t 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/> 
 
<link href="http://kenwheeler.github.io/slick/css/style.css" rel="stylesheet"/> 
 
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script> 
 

 
<section id="features" class="blue"> 
 
    <div class="center"> 
 
    <div class="content"> 
 
     <div class="single-item"> 
 
      <div><h3>1</h3></div> 
 
      <div><h3>2</h3></div> 
 
      <div><h3>3</h3></div> 
 
      <div><h3>4</h3></div> 
 
      <div><h3>5</h3></div> 
 
      <div><h3>6</h3></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 2

Penso che questo potrebbe essere la risposta appropriata per la modalità centro chiazza di petrolio

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Maganti IT Solution</title> 
    <link rel="stylesheet" type="text/css" href="slick.css"/> 
    <link rel="stylesheet" type="text/css" href="slick-theme.css"/> 
    </head> 
    <style> 

    .slick-center .slide-h3{ 
    color: #FFF; 
    } 
    .slider{ 
    width: 600px; 
    height:150px; 
    margin: 20px auto;  
    text-align: center; 
    } 
    .slide-h3{ 
    margin: 10% 0 10% 0; 
    padding: 40% 20%; 
    background: #008ed6; 
    } 
    .slider div{ 
    margin-right: 5px; 
    } 
    .slick-slide{ 
    opacity: .6; 
    } 
    .slick-center{ 
    display: block; 
    max-width: 10% !important; 
    max-height:20% !important; 
    opacity: 1; 


    } 
    </style> 
    <body> 
    <section id="slick-content"> 

    <div class="slider"> 
    <div><div class="slide-h3">1</div></div> 
    <div><div class="slide-h3">2</div></div> 
    <div><div class="slide-h3">3</div></div> 
    <div><div class="slide-h3">4</div></div> 
    <div><div class="slide-h3">5</div></div> 
    <div><div class="slide-h3">6</div></div> 

    </div> 
</body> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
    <script type="text/javascript" src="slick.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.slider').slick({ 
    centerMode: true, 
    centerPadding: '60px', 
    slidesToShow: 3, 
    speed:1500, 
    index: 2, 
    responsive: [ 
    { 
     breakpoint: 768, 
     settings: { 
     arrows: false, 
     centerMode: true, 
     centerPadding: '40px', 
     slidesToShow: 3 
     } 
    }, 
    { 
     breakpoint: 480, 
     settings: { 
     arrows: false, 
     centerMode: true, 
     centerPadding: '40px', 
     slidesToShow: 1 
     } 
    } 
    ] 
}); 
    }); 
    </script> 

    </body> 
</html> 

Answer 3

1. Hai 2 cursori definiti (al centro, single-voce), mentre nel tuo html solo "elemento singolo" ha diapositive. La diapositiva "centro" racchiude "oggetto singolo" e contiene solo un div figlio.
2. L'oggetto singolo della classe è stato scritto con spazi che lo rendono 3 diverse classi "single" "-" (anche se non penso che questa sia una classe) e "item".

Se si intende effettuare la slitta "single-item" per mostrare in centerMode allora questo è il giusto codice:

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" /> 
< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js" > </script> 
<link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/css/style.css" /> 
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"> </script> 


<script type="text/javascript"> 
$(document).ready(function() { 

$('.single-item').slick({ 
centerMode: true, 
centerPadding: '60px', 
slidesToShow: 3, 
responsive: [ 
{ 
    breakpoint: 768, 
    settings: { 
    arrows: false, 
    centerMode: true, 
    centerPadding: '40px', 
    slidesToShow: 3 
    } 
}, 
{ 
    breakpoint: 480, 
    settings: { 
    arrows: false, 
    centerMode: true, 
    centerPadding: '40px', 
    slidesToShow: 1 
    } 
    } 
    ] 
});    
}); 
</script> 



<section id="features" class="blue"> 
<div class="content"> 
    <div class="single-item"> 
     <div><h3>1</h3></div> 
     <div><h3>2</h3></div> 
     <div><h3>3</h3></div> 
     <div><h3>4</h3></div> 
     <div><h3>5</h3></div> 
     <div><h3>6</h3></div> 
    </div> 
</div> 
</section>