CODEWITHSUNDEEP
javascriptjquerycsscarousel
DT.DTDG
DT.DTDG

Reputation: 765

Stacking images in carousel

I have slick.js running with 5 images cycling at a time.

The trouble I'm having is getting 15 images to display on the first slide stacked in a 5 across and 3 down layout so users can scroll/paginate through 15 images at a time rather than just 5.

I'm currently using:

var slickOpts = {
        slidesToShow: 5,
        slidesToScroll: 5,
        dots: true,
        prevArrow: '.btn-prev',
        nextArrow: '.btn-next'
    };

When I set both slidesToShow and slidesToScroll to 15 it just fits them all on one row instead of stacking them.

I've also tried increasing the parent container height but still no luck.

#dashboard {
    height: 600px
}

How can I get them to stack in that 5x3 layout and scroll through 15 at a time?

http://jsfiddle.net/q1qznouw/19/

Upvotes: 1

Views: 99

Answers (2)

Imran Bughio
Imran Bughio

Reputation: 4941

DEMO

You can tell the plugin that first 15 items are 1 item this way you can scroll a set of 15 items.

HTML:

<div id="dashboard">
    <div class="panel">
        <div class="panel__item">1</div>
        <div class="panel__item">2</div>
        <div class="panel__item">3</div>
        <div class="panel__item">4</div>
        <div class="panel__item">5</div>
        <div class="panel__item">6</div>
        <div class="panel__item">7</div>
        <div class="panel__item">8</div>
        <div class="panel__item">9</div>
        <div class="panel__item">10</div>
        <div class="panel__item">11</div>
        <div class="panel__item">12</div>
        <div class="panel__item">13</div>
        <div class="panel__item">14</div>
        <div class="panel__item">15</div>
    </div>
    <div class="panel">
        <div class="panel__item">16</div>
        <div class="panel__item">17</div>
        <div class="panel__item">18</div>
        <div class="panel__item">19</div>
        <div class="panel__item">20</div>
        <div class="panel__item">21</div>
        <div class="panel__item">22</div>
        <div class="panel__item">23</div>
        <div class="panel__item">24</div>
        <div class="panel__item">25</div>
        <div class="panel__item">26</div>
        <div class="panel__item">27</div>
        <div class="panel__item">28</div>
        <div class="panel__item">29</div>
        <div class="panel__item">30</div>
    </div>
</div>

CSS (For Layout):

.panel__item {
    border: 10px solid #333;
    background: #ccc;
    height:200px;
    margin: 10px;
    font-size: 72px;
    text-align: center;
    line-height: 200px;
    margin: 2%;
    width: 16%;
    float: left;
    box-sizing: border-box;
}
.panel__row {
    margin: 0 -2%;
}

Dont forget to change the number of items in JS from 5 to 1.

Upvotes: 3

Vishu238
Vishu238

Reputation: 673

Please check

Check http://jsfiddle.net/q1qznouw/23/
You need to set
height:200px !important; width:200px !important;
in panel and also need to set overflow:hidden to your dashboard and sets its height accordingly

Upvotes: 1

Related Questions