CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapslick.js
jsPlayer
jsPlayer

Reputation: 1245

slick slider arrow not seeing properly

I know there have been other questions similar to this in stack overflow, but none seem to fix my problem. I thought slick slider will have arrows by default. I am targeting the arrow in my CSS and made the right side arrow (next) to work okay but the left arrow I can barely see and is hiding behind the div. No margin correction is moving the arrow. Also, how do I add colors between the divs so each divs looks individual? I have jsfiddle link here ( result is not showing the carousel correctly but it is working in my local )

I want the carousel to look like this. enter image description here

$(document).ready(function() {
  $('.providor-slick-slider').slick({
    centerMode: true,
    centerPadding: '20px',
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    dots: false,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
          infinite: true,
          dots: false,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
          infinite: true,
          dots: false,
        }
      }
      // You can unslick at a given breakpoint now by adding:
      // settings: "unslick"
      // instead of a settings object
    ]
  });
});
body {
  font-family: 'Roboto', sans-serif!important;
}

.sub-head h1 {
  color: #006ac3;
}

.sub-content p {
  color: #7c7f7e;
  margin-top: 15px;
  font-size: 16px;
  margin-bottom: 30px;
}

.doc-content h3 {
  color: #0a5185;
  margin-top: 0px;
  padding-top: 20px;
}

.doc-content {
  background: #f1f1f1;
  padding: 0px 15px 30px 15px;
}

.doc-content ul {
  list-style: none;
}

.doc-content ul li {
  margin-bottom: 20px;
}

.doc-content1 h3 {
  color: #726d7b;
}

.slick-prev:before {
  content: "\f104";
  font-family: FontAwesome;
  color: red;
  font-size: 30px;
}

.slick-next:after {
  content: "\f105";
  font-family: FontAwesome;
  color: red;
  font-size: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="providor-slick-slider">
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>

    <div class="slick-slider__slide">
      <div class="doc-content">
        <div class="text-center">
          <h3>PHYSICIAN LED</h3>
        </div>
        <ul>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
          <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu docendi indoctum eam.</li>
        </ul>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/jayelementblue/pymd3nb1/

Upvotes: 0

Views: 151

Answers (1)

Master Yoda
Master Yoda

Reputation: 4412

For your example to work you need to make sure that jquery.min.js is referenced before bootstrap.js and slick.js

Also in order to make each slide have a different coloured border you could create an array of colours and select a random colour from it for each slides border.

Also, rename your .container div to .content and add the following css to hopefully solve your arrows issue:

.content {
    margin: auto;
    padding: 30px;
}


$(document).ready(function(){
	
  //9 colours for nine panels
  var colourArray = ["red", "orange", "yellow", "green", "blue", "purple", "violet", "aqua", "pink"];
  
  var i = 0;
  
  $(".doc-content").each(function()
  {
    //get the next colour in the array for each panel
    var item = colourArray[i++];
    
    //or you could pick a random colour from the array
    //var item = colourArray[Math.floor(Math.random()*colourArray.length)];
    
    //set css border dynamically
    //$(this).css("border", "3px solid " + item);
    
    //OR set css border to static colour with wider border
    $(this).css("border", "5px solid white");
  });

   $('.providor-slick-slider').slick({
  centerMode: true,
  centerPadding: '20px',
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3,
  cssEase: 'linear',
  arrows: true,
  dots: false,
   responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: false,
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
		infinite: true,
		dots: false,
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
		infinite: true,
	    dots: false,
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});
});
body{font-family: 'Roboto', sans-serif!important;}
.sub-head h1{color:#006ac3;}
.sub-content p{color:#7c7f7e; margin-top:15px; font-size:16px; margin-bottom:30px;}
.doc-content h3{color:#0a5185;     margin-top: 0px; padding-top: 20px;}
.doc-content{background:#f1f1f1;     padding: 0px 15px 30px 15px;}

.doc-content ul{list-style:none;}
.doc-content ul li{margin-bottom:20px;}
.doc-content1 h3{color:#726d7b;}



.slick-prev:before {
 content: "\f104" !important;
 font-family: FontAwesome !important;
 color: white !important;
 background-color: #0a5185 !important;
 padding: 0 6px;
 border-radius: 1px;
 font-weight: bold;
}

.slick-next:before {
   content: "\f105" !important;
 font-family: FontAwesome !important;
 color: white !important;
 background-color: #0a5185 !important;
 padding: 0 6px;
  border-radius: 1px;
   font-weight: bold;
}

.doc-content
{
  margin: 0 7px;
}

.content {
    margin: auto;
    padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<body>

  <div class="content">
    <div class="providor-slick-slider">
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>
      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

      <div class="slick-slider__slide">
        <div class="doc-content">
          <div class="text-center">
            <h3>PHYSICIAN LED</h3>
          </div>
          <ul>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
            <li>Lorem ipsum dolor sit amet, vix eu possim fuisset electram, congue munere vis et. Et mel vivendo antiopam, cu
              docendi indoctum eam.</li>
          </ul>
        </div>
      </div>

    </div>

  </div>
</body>

Upvotes: 1

Related Questions