web-dev-qa-db-ja.com

スリックカルーセル「センターモード」で立ち往生

私はかなりの数時間Slickカルーセルをいじっていましたが、SlickのWebサイトにある「センターモード」を実装する方法を実際に理解することはできません。 http：//kenwheeler.github。 io/slick /

次のようになります。

Slick

現在のコードを用意しましたが、それでも私が望むものが得られません：

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

なぜこれが機能しないのかについての提案があれば、私は本当に助けに感謝します。

ありがとう。

javascriptjquerycarouselslick.js
9
Ian Batten

これはスリックセンターモードの適切な答えだと思います

<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
nagoor15
  1. 2つのスライダー（中央、単一項目）が定義されていますが、HTMLには「単一項目」のみにスライドがあります。 「中央」スライドは「単一項目」をラップし、1つの子divのみを保持します。
  2. クラスの単一アイテムは、3つの異なるクラス「単一」「-」（これはクラスだとは思わないが）と「アイテム」になるようにスペースで記述された。

「単一項目」スライドを作成してcenterModeで表示する場合、これは正しいコードです。

<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>
2
Asaf David

正しく動作するようにスニペットをクリーンアップした後（HTMLをHTML部分に移動し、無関係でエラーのある空白を削除しました）、コードで機能していないものがわかりません。たぶんそれは単なる構文エラーだったのでしょうか？

私が気づいた主なことは、あなたがclass="single - item"クラスを持つことを明確に意図した要素single-item、これはスライダーの作成に使用されるセレクターでした。それが元のコードにあったのか、それとも間違ってコピーされたのかはわかりません。

$(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.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>
0
Austin Mullins