jquery - examples - slick slider vertical
¿Cómo puedo cambiar el ancho y la altura de las diapositivas en Slick Carousel? (4)
Básicamente, necesita editar el JS y agregar (en este caso, dentro de $(''#featured-articles'').slick({ ), esto:
variableWidth: true,
Esto le permitirá editar el ancho de su CSS donde pueda usar, genéricamente:
.slick-slide {
width: 100%;
}
o en este caso:
.featured {
width: 100%;
}
http://kenwheeler.github.io/slick/
Un amigo me sugirió que usara el carrusel Slick de Ken Wheeler y decidí intentarlo. Estoy teniendo un par de problemas con eso. La primera es que las diapositivas no se cargan "una encima de la otra" como deberían. Se apilan verticalmente. Cuando la primera diapositiva se desvanece, está en el lugar correcto, sin embargo, cuando la segunda diapositiva se difumina, está debajo de donde estaba la primera diapositiva. Observe también que en la primera diapositiva se corta el borde derecho y en la segunda diapositiva se corta todo lo que no sea el borde izquierdo.
El segundo problema es que parece que no puedo cambiar el ancho o el alto de las diapositivas. Todos serían las mismas dimensiones. (Se establecen en mi archivo css en la clase "destacada").
¿Qué estoy haciendo 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>
Encontré una buena solución a mí mismo. Ya que el slick slider todavía se usa hoy en día publicaré mi enfoque.
La respuesta de @RuivBoas es en parte correcta. - Puede cambiar el ancho de la diapositiva pero puede romper el control deslizante. ¿Por qué?
Slick slider puede exceder el ancho del navegador. El ancho real del contenedor se establece en un valor que puede acomodar todas sus diapositivas.
La mejor solución para establecer el ancho de la diapositiva es usar el ancho de la ventana del navegador real. Funciona mejor con diseño responsivo.
Por ejemplo 2 diapositivas con ancho absorbido.
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
});
});
Marcado HTML
<div id="container">
<div><img/></div>
<div><img/></div>
<div><img/></div>
</div>
Hice este plugin. Hay una cierta interferencia de css teniendo lugar.
Es su borde en el control deslizante en sí. O bien usar
box-sizing: border-box
para absorber el ancho del borde, o coloque el borde en el contenido dentro de la diapositiva.
Inicialicé el deslizador con una de las propiedades como
variableWidth: true,
entonces podría establecer el ancho de las diapositivas a cualquier cosa que quisiera en CSS con:
.slick-slide
{
width: 200px;
}