Menu
http://kenwheeler.github.io/slick/
A friend suggested that I use Ken Wheeler's Slick carousel and I decided to give it a try. I am having a couple of problems with it. The first is that the slides don't load "on top of each other" like they should. They are stacked vertically. When the first slide fades in, it is in the correct spot, however, when the second slide fades in, it is below where the first slide was. Also notice that on the first slide the right border is cut off and on the second slide everything besides the left border is cut off.
The second problem is that I can't seem to change the width or height of the slides. They would all be the same dimensions. (They are set in my css file in the "featured" class.)
What am I doing wrong?
<?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> 
379
Slick slider may exceed browser width. Actual container width is set to value that can accomodate all it's slides. The best solution for setting slide width is to use width of the actual browser window.
Set the height of the slider to a fixed value like this: . slick-slide { height: 300px; } this will keep a constant size of the slider and the images inside it will also shrink to fit the carousal height.
You can use "appendDots: $(Element)" in the Slick settings. It will append the dots to that element. You can place that element at any location using normal CSS. If you want it over the slide then you can use absolute or relative positioning on the element.
I initialised the slider with one of the properties as
variableWidth: true then i could set the width of the slides to anything i wanted in CSS with:
.slick-slide { width: 200px; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
