Как изменить ширину и высоту слайдов на Slick Carousel?

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

Друг предложил мне использовать карусель Ken Wheeler Slick, и я решил попробовать. У меня есть пара проблем с этим. Во-первых, слайды не загружаются "друг на друга" так, как должны. Они сложены вертикально. Когда появляется первый слайд, он находится в правильном месте, однако, когда появляется второй слайд, он находится ниже того места, где был первый слайд. Также обратите внимание, что на первом слайде правая граница обрезается, а на втором слайде обрезается все, кроме левой границы.

Вторая проблема заключается в том, что я не могу изменить ширину или высоту слайдов. Все они будут одинакового размера. (Они установлены в моем файле CSS в классе "Featured".)

Что я делаю неправильно?

<?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="#" onclick="location.href='http://localhost/basecommand/css/960.css'; return false;" rel="stylesheet" type="text/css" />
    <link href="#" onclick="location.href='http://localhost/basecommand/css/style.css'; return false;" rel="stylesheet" type="text/css" />
    <link href="#" onclick="location.href='http://localhost/basecommand/css/foundation-icons.css'; return false;" rel="stylesheet" type="text/css" />
    <link href="#" onclick="location.href='http://localhost/basecommand/css/slick.css'; return false;" 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="#" onclick="location.href='http://localhost/basecommand/index.php/articles/Another-Test-Article/5'; return false;">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="#" onclick="location.href='http://localhost/basecommand/index.php/articles/This-Is-a-Test-Article/1'; return false;">Read More</a></h2>       
                </div>

            </div>

Ответы

Ответ 1

Я сделал этот плагин. Существует некоторая css-интерференция.

Это ваша граница на самом слайдере. Либо используйте

box-sizing: border-box

чтобы поглотить ширину рамки или поместить границу содержимого внутри слайда.

Ответ 2

Я инициализировал ползунок с одним из свойств как

variableWidth: true,

то я мог бы установить ширину слайдов на все, что я хотел в CSS, с помощью:

.slick-slide
{
width: 200px;
}

Ответ 3

В основном вам нужно отредактировать JS и добавить (в этом случае внутри $('#featured-articles').slick({), это:

variableWidth: true,

Это позволит вам отредактировать ширину в CSS, где вы можете в основном использовать:

.slick-slide {
    width: 100%;
}

или в этом случае:

.featured {
    width: 100%;
}

Ответ 4

Я нашел хорошее решение сам. Поскольку скользкий слайдер все еще используется в настоящее время, я опубликую свой подход.

@RuivBoas ответ частично верен. - Он может изменить ширину слайда, но может сломать слайдер. Зачем?

Гладкий слайдер может превышать ширину браузера. Фактическая ширина контейнера устанавливается в значение, которое может вместить все его слайды.

Лучшее решение для установки ширины слайда - использовать ширину фактического окна браузера. Лучше всего работает с адаптивным дизайном.

Например 2 слайда с поглощенной шириной

CSS

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

$(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>

Ответ 5

Я знаю, что на этот вопрос уже есть ответ, но я только нашел лучшее решение, используя параметр 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
    }
  }
  ]
});

Ответ 6

Вы также можете использовать это:

$('.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
})