Slick Arrows > Image

by Paulie_D

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.4.1/slick.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jquery.slick/1.4.1/slick-theme.css">
<br>
<br>
<br>
<!-- Course Benmark Navigation Menu -->
<div class="container nav-benchmark" style="background-color:white;">
    <div class="row">
        <div class="slide">
            <div class="col-lg-1">
                <br>
                <div class=" carousel btn-course-benchmark">
                    <br>Course
                    <br>Benchmark
                    <br>Pretest</div>
            </div>
            <div class="col-lg-1">
                <br>
                <div class=" carousel btn-chapter">
                    <br>Chapter 1:
                    <br>Name of
                    <br>Chapter</div>
            </div>
            <div class="col-lg-1">
                <br>
                <div class=" carousel btn-chapter">
                    <br>Chapter 2:
                    <br>Name of
                    <br>Chapter</div>
            </div>
            <div class="col-lg-1">
                <br>
                <div class=" carousel btn-course-benchmark">
                    <br>Course
                    <br>Benchmark 1</div>
            </div>
            <div class="col-lg-1">
                <br>
                <div class="border-round">
                    <div class=" carousel btn-chapter">
                        <br>Chapter 3:
                        <br>Name of
                        <br>Chapter</div>
                </div>
            </div>
            <div class="col-lg-1">
                <br>
               ...

CSS

/* Slick Settings */
 .slick-next {
    right: 10px;
}
.slick-prev {
    left: -20px;
}
.slick-next:before {
    content:url(http://lorempixel.com/20/20/);
}
.slick-prev:before {
    content:url(http://lorempixel.com/20/20/);
}



/* Objects Style */
#btn-progression-benchmark {
    background-color: orange;
    color: white;
    width: 80px;
    height: 90px;
    padding: 3px;
    font-size: 10px;
    font-weight: bold;
}
.btn-course-benchmark {
    background-color: #d7eaf6;
    border:#3498db 2px solid;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.btn-course-benchmark-thin {
    background-color: #d7eaf6;
    border:#3498db 1px solid;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.btn-chapter {
    background-color: #d7eaf6;
    border:#3498db 2px solid;
    border-radius: 50%;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.btn-chapter-thin {
    background-color: #d7eaf6;
    border:#3498db 1px solid;
    border-radius: 50%;
    color: black;
    width: 80px;
    height: 80px;
    padding: 3px;
    font-size: 10px;
    text-align: center;
}
.border-round {
    border:1px solid #3498db;
    border-radius: 50%;
    width: 90px;
    height: 90px;
    padding: 4px;
}
.vertical-line {
    border-left:1px solid #000;
    height:130px;
    width: 40px;
    text-align: center;
}

JavaScript

$('.slide').slick({

    slidesToShow: 7,
    slidesToScroll: 7,
    arrows: true,
    dots: true,
});