Comment puis-je changer la largeur et la hauteur de diapositives sur la Nappe de Manège?

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

Un ami a suggéré que j'utilise Ken Wheeler Slick du carrousel et j'ai décidé de lui donner un essai. Je vais avoir quelques problèmes avec elle. La première est que les lames ne pas charger "sur le dessus les uns des autres" comme ils le devraient. Ils sont empilées verticalement. Lors de la première diapositive fondus dans, il est dans le bon endroit, cependant, lorsque la deuxième diapositive fondus dans, il est en dessous, où la première diapositive a été. Notez également que sur la première diapositive de la bordure droite est coupée, et sur la deuxième diapositive tout, en plus de la bordure gauche est coupée.

Le deuxième problème est que je n'arrive pas à modifier la largeur ou la hauteur de la glisse. Elles sont toutes les mêmes dimensions. (Ils sont mis dans mon fichier css dans la "vedette" de la classe.)

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>

Comment puis-je changer la largeur et la hauteur de diapositives sur la Nappe de Manège?
Comment puis-je changer la largeur et la hauteur de diapositives sur la Nappe de Manège?

InformationsquelleAutor ShoeLace1291 | 2014-04-24
  1. 28

    J'ai fait ce plugin. Il y a un peu de css interférences en prenant place.

    C'est à la frontière sur le curseur lui-même. Soit utiliser 

    box-sizing: border-box

    pour absorber la largeur de la bordure, ou mettre de la frontière sur le contenu à l'intérieur de la diapositive.

    • Ok, donc se débarrasser de la frontière résolu le problème de l'empilement de... mais comment pourrais-je modifier les dimensions de la diapositive réelle? Je l'ai mis dans mon fichier css, mais ça ne semble pas faire quoi que ce soit.
    • Quelle était la bonne réponse ici? Je suis en train de le glisser dans la largeur de la CSS, mais le style en ligne de la js est primordial que si elle est ignorée.
    • Je ne vois pas où est le droit de réponse ici
    InformationsquelleAutor Ken Wheeler
  2. 53

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

    variableWidth: true,

    ensuite, j'ai pu régler la largeur de la glisse à ce que je voulais en CSS avec:

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

    Fondamentalement, vous devez modifier le JS et ajouter (dans ce cas, à l'intérieur de $('#featured-articles').slick({ ), ce:

    variableWidth: true,

    Cela vous permettra de modifier la largeur de votre CSS où vous pouvez, de manière générique utilisation:

    .slick-slide {
width: 100%;
}

    ou dans ce cas:

    .featured {
width: 100%;
}
    InformationsquelleAutor RuiVBoas
  4. 0

    J'ai trouvé une bonne solution moi-même. Depuis slick curseur est encore utilisé aujourd'hui, je vais poster mon approche.

    @RuivBoas réponse est partiellement correcte. - On peut modifier la largeur de la lame, mais il peut se casser le curseur. Pourquoi?

    De la nappe de curseur peut dépasser la largeur du navigateur. Conteneur réel largeur est définie
    de valeur qui peut accueillir tous les diapositives.

    La meilleure solution pour le réglage de la glissière largeur est d'utiliser la largeur de la fenêtre du navigateur. Il fonctionne mieux avec du responsive design.

    Par exemple 2 lames avec absorbé largeur

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

    Balisage HTML

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

    Je sais qu'il existe déjà une réponse à cela, mais je viens de trouver une meilleure solution à l'aide de la variableWidth paramètre, il suffit de le mettre à 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
}
}
]
});
    InformationsquelleAutor jacm365