Glide Carousel & Semantic UI

glide-carousel-semantic-ui.markdown

Glide Carousel & Semantic UI

This pen is a quick demo of the Glide Carousel & Semantic UI (with version 0.12.0 css)

A Pen by Jeff Wainwright on CodePen.

License.

index.html

<div class="slider slider1">
    <div class="slides">
      <div class="slide-item item1">
      </div>
      <div class="slide-item item2"> 
      </div>
      <div class="slide-item item3">
      </div>
      <div class="slide-item item4">
      </div>
  </div>
</div>

script.js

$('.slider').glide({
  autoplay: false,
  arrowsWrapperClass: 'slider-arrows',
  arrowRightText: '',
  arrowLeftText: ''
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js"></script>

styles

<link href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.min.css" rel="stylesheet" />
<link href="http://jeffry.in/old-jeffry-in/css/jeffry.in.css" rel="stylesheet" />
<link href="http://jeffry.in/old-jeffry-in/css/jeffry.in.slider.css" rel="stylesheet" />
<link href="http://fonts.googleapis.com/css?family=Lobster|Raleway:300,500,700" rel="stylesheet" />