web-dev-qa-db-fra.com

Comment changer la largeur et la hauteur des diapositives sur Slick Carousel?

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

Un ami m'a suggéré d'utiliser le carrousel Slick de Ken Wheeler et j'ai décidé de l'essayer. J'ai quelques problèmes avec ça. La première est que les diapositives ne se chargent pas "les unes sur les autres" comme elles le devraient. Ils sont empilés verticalement. Lorsque la première diapositive apparaît en fondu, il se trouve au bon endroit. Cependant, lorsque la deuxième diapositive apparaît en fondu, il se trouve en dessous de l'endroit où se trouvait la première. Notez également que sur la première diapositive, la bordure droite est coupée et que sur la seconde diapositive, tout est coupé, à l'exception de la bordure gauche.

Le deuxième problème est que je n'arrive pas à modifier la largeur ou la hauteur des diapositives. Ils seraient tous les mêmes dimensions. (Ils sont définis dans mon fichier CSS dans la classe "sélectionnée".)

Qu'est-ce que je fais mal?

<?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
22
ShoeLace1291

J'ai fait ce plugin. Il y a des interférences css en cours.

C'est votre bordure sur le curseur lui-même. Soit utiliser 

box-sizing: border-box

absorber la largeur de la bordure ou placer la bordure sur le contenu de la diapositive.

26
Ken Wheeler

J'ai initialisé le curseur avec l'une des propriétés comme

variableWidth: true,

alors je pourrais définir la largeur des diapositives à tout ce que je voulais en CSS avec:

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

En gros, vous devez éditer le JS et ajouter (dans ce cas, dans $('#featured-articles').slick({), ceci:

variableWidth: true,

Cela vous permettra d’éditer la largeur dans votre CSS où vous pourrez utiliser génériquement:

.slick-slide {
    width: 100%;
}

ou dans ce cas:

.featured {
    width: 100%;
}
2
RuiVBoas

J'ai trouvé la bonne solution moi-même. Depuis slick slider est encore utilisé de nos jours, je vais poster mon approche.

La réponse de @RuivBoas est en partie correcte. - Cela peut changer la largeur de la diapositive mais peut casser le curseur. Pourquoi?

Le curseur glissant peut dépasser la largeur du navigateur. La largeur réelle du conteneur est définie à la valeur qui peut accueillir toutes ses diapositives.

La meilleure solution pour définir la largeur de la diapositive consiste à utiliser la largeur de la fenêtre du navigateur. Cela fonctionne mieux avec un design réactif.

Par exemple 2 lames avec largeur absorbée

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

balise HTML 

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

Je sais qu'il existe déjà une réponse à cette question, mais je viens de trouver une meilleure solution en utilisant le paramètre variableWidth , il suffit de la définir sur true dans les paramètres de chaque point d'arrêt, comme ceci:

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