web-dev-qa-db-ja.com

スリックカルーセルのスライドの幅と高さを変更するにはどうすればよいですか？

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

友人から、Ken WheelerのSlickカルーセルを使用するように提案され、試してみることにしました。私はいくつかの問題を抱えています。 1つ目は、スライドが本来のように「互いの上に」読み込まれないことです。それらは垂直に積み重ねられます。最初のスライドがフェードインすると、正しい場所にありますが、2番目のスライドがフェードインすると、最初のスライドがあった場所より下になります。また、最初のスライドでは右の境界が切り取られ、2番目のスライドでは左の境界以外のすべてが切り取られていることに注意してください。

2番目の問題は、スライドの幅または高さを変更できないように見えることです。それらはすべて同じ次元になります。 （これらは、「特集」クラスのcssファイルに設定されています。）

何が間違っていますか？

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>BaseCMD :: Home</title>
    <meta name="description" content="If it\s related to video games, you can find it here." />
<meta name="keywords" content="video games, Microsoft, xbox, xbox 360, xbox one, sony, PlayStation, nintendo, wii, wii u, ds, league, console, platform, reviews, resources, players, teams, forums, servers, blog, base command, basecmd" />

    <link href="http://localhost/basecommand/css/960.css" rel="stylesheet" type="text/css" />
    <link href="http://localhost/basecommand/css/style.css" rel="stylesheet" type="text/css" />
    <link href="http://localhost/basecommand/css/foundation-icons.css" rel="stylesheet" type="text/css" />
    <link href="http://localhost/basecommand/css/slick.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://localhost/basecommand/js/global.js"></script>
    <script src="http://localhost/basecommand/js/slick.min.js"></script>

</head>

 <body>

 <h1>Top Stories</h1>

<script>

$(document).ready(function(){
$('#featured-articles').slick({
  arrows: true,
  autoplay: true,
  autoplaySpeed: 3000,
  dots: true,
  draggable: false,
  fade: true,
  infinite: false,
  responsive: [
  {
    breakpoint: 620,
    settings: {
        arrows: true
    }
  },
  {
    breakpoint: 345,
    settings: {
        arrows: true
    }
  }
  ]
});
});

</script>

            <div id="featured-articles">

                <div class="featured" style="background: url(attachments/56da367f9e7a66952fd1ed2e79b4b317.jpg);">
                    <h1>Another Test Article</h1>
                    <p class="info">https://www.bungie.net/pubassets/1319/Destiny_31.png

Lorem ipsum dolor sit amet, inani accusata et duo, ad sit veniam interpretaris. Sea scripta nostrum ex, liber fastidii ea duo. Id vim nobis option contentiones, mea probatus praesent ut. Sea ex libri...</p>

                    <h2><a href="http://localhost/basecommand/index.php/articles/Another-Test-Article/5">Read More</a></h2>     
                </div>

                <div class="featured" style="background: url(attachments/4e683defc6aba497f347b08ac05edb14.jpg);">
                    <h1>This Is a Test Article</h1>
                    <p class="info">https://www.bungie.net/pubassets/1319/Destiny_31.png

Lorem ipsum dolor sit amet, inani accusata et duo, ad sit veniam interpretaris. Sea scripta nostrum ex, liber fastidii ea duo. Id vim nobis option contentiones, mea probatus praesent ut. Sea ex libri...</p>
                    <h2><a href="http://localhost/basecommand/index.php/articles/This-Is-a-Test-Article/1">Read More</a></h2>       
                </div>

            </div>

Slide 1Slide 2

jquerycarouselslick.js
23
ShoeLace1291

このプラグインを作成しました。いくつかのCSS干渉が発生しています。

スライダー自体の境界線です。どちらかを使用する

box-sizing: border-box

境界線の幅を吸収するか、スライド内のコンテンツに境界線を配置します。

29
Ken Wheeler

次のプロパティのいずれかでスライダーを初期化しました

variableWidth: true,

次に、スライドの幅をCSSで必要なものに設定できます：

.slick-slide
{
width: 200px;
}
55
nicksmith

基本的に、JSを編集して追加する必要があります（この場合、$('#featured-articles').slick({内）、これ：

variableWidth: true,

これにより、一般的に使用できるCSSの幅を編集できます。

.slick-slide {
    width: 100%;
}

またはこの場合：

.featured {
    width: 100%;
}
3
RuiVBoas

これも使用できます：

$('.slider').slick({
   //other settings ................
   respondTo: 'slider', //makes the slider to change width depending on the container it is in
   adaptiveHeight: true //makes the height change depending on the height of the element inside
})
0
roskaboska420

自分で良い解決策を見つけました。スリックスライダーは現在も使用されているので、アプローチを投稿します。

@RuivBoasの答えは部分的に正しいです。 -スライドの幅を変更できますが、スライダーが破損する可能性があります。 なぜ？

スリックスライダーがブラウザーの幅を超える場合があります。実際のコンテナの幅は、すべてのスライドを収容できる値に設定されます。

スライドの幅を設定する最良の解決策は、実際のブラウザウィンドウの幅を使用することです。レスポンシブデザインに最適です。

たとえば、幅が吸収された2つのスライド

[〜＃〜] css [〜＃〜]

.slick-slide {
    width: 50vw;
    // for absorbing width from @Ken Wheeler answer
    box-sizing: border-box;
}

[〜＃〜] js [〜＃〜]

$(document).on('ready', function () {
            $("#container").slick({
                variableWidth: true,
                slidesToShow: 2,
                slidesToScroll: 2
            });
        });

HTMLマークアップ

<div id="container">
    <div><img/></div>
    <div><img/></div>
    <div><img/></div>
</div>
0
Bartosz Was

私はすでにこれに対する答えがあることを知っていますが、variableWidthパラメーターを使用してより良い解決策を見つけました。次のように、各ブレークポイントの設定でtrueに設定するだけです：

$('#featured-articles').slick({
  arrows: true,
  autoplay: true,
  autoplaySpeed: 3000,
  dots: true,
  draggable: false,
  fade: true,
  infinite: false,
  responsive: [
  {
    breakpoint: 620,
    settings: {
        arrows: true,
        variableWidth: true
    }
  },
  {
    breakpoint: 345,
    settings: {
        arrows: true,
        variableWidth: true
    }
  }
  ]
});
0
jacm365