Geek Answers Handbook

Stuck with a saucepan "Center",

I spend a roundabout carousel for several hours, and really can't figure out how to implement the “central mode” on the Slick website: http://kenwheeler.imtqy.com/slick/

It looks something like this:

Slick

I have the current code in place, but it still does not give me what I want:

< 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.imtqy.com/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 }); }); </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>

If anyone has any suggestions as to why this might not work, I am very grateful for the help.

Thanks.

+7
javascript jquery carousel
source share
3 answers

I think this might be the appropriate answer for slick center mode

 <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>
+2
source share
  • You have 2 sliders defined (in the center, one element), while in your html only a “separate element” has slides. A “center slide” wraps a “single element” and contains only one child div.
  • The element class was written with spaces, which makes it 3 different classes of "single" "-" (although I do not think it is one class) and "item".

If you intended to make a “one-element” slide for display in centerMode, this is the correct code:

 <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.imtqy.com/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>
+1
source share

After clearing your fragment for proper operation (moving HTML to part of HTML, removing extraneous and erroneous spaces), I cannot say that it does not work with your code. Perhaps these were just syntax errors?

The main thing I noticed was that you had a class="single - item" element, which obviously had a single-item class, as it was a selector used to create the slider. I do not know if this was in your source code or was simply copied incorrectly.

 $(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 }); }); 
 <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.imtqy.com/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>
0
source share

More articles:


All Articles