I am putting together a slide presentation using a jquery plugin called 'slick' (/) using django and a bootstrap 3 template. I've got a basic carousel working using a django template that looks like:

  <div class="your-class">
    <div>your content</div>
    <div><IMG src=":ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>


    <div>your content</div>
  </div>

I have a fiddle at /

I'm wondering if there is a way to add arrows to the left and right of the slide, like in the first example (Single Item) on / . I can only see the prev and next buttons below the slides

I am putting together a slide presentation using a jquery plugin called 'slick' (http://kenwheeler.github.io/slick/) using django and a bootstrap 3 template. I've got a basic carousel working using a django template that looks like:

  <div class="your-class">
    <div>your content</div>
    <div><IMG src="https://encrypted-tbn2.gstatic./images?q=tbn:ANd9GcSj2c33fdt1ugB8VBuE5V37wnmPoxWMknX9JnGycNiH2yr3BpDKVA"></div>


    <div>your content</div>
  </div>

I have a fiddle at http://jsfiddle/kc11/20a90mdm/1/

I'm wondering if there is a way to add arrows to the left and right of the slide, like in the first example (Single Item) on http://kenwheeler.github.io/slick/ . I can only see the prev and next buttons below the slides

• javascript
• jquery
• css
• twitter-bootstrap
• slick.js

Share Improve this question Follow asked May 11, 2015 at 17:30 user1592380user1592380 36.5k105105 gold badges313313 silver badges552552 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Your arrows are already there, they are the Previous and Next buttons at the bottom of the page. You would need to include slick-theme.css or style them by yourself via css.

Here I try css code...

    .slick-prev{
    background:#000;
    width:50px;
    height:50px;
    position:absolute;
    left:0;
    top:50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Safari */
    transform: translateY(-50%);
    }
.slick-next{
    background:#000;
    width:50px;
    height:50px;
    position:absolute;
    right:0;
    top:50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%); /* Safari */
    transform: translateY(-50%);
    }

NOTE

Give their parent class

position:relative

Also you can set left & right position as your need.

The color of the buttons in slick-theme.css is white, so not visible on a white background.

Change the color of the buttons there or overwrite in your own style sheet like this:

.slick-prev:before, .slick-next:before {
    color: #000000;
}