Glide Carousel & Semantic UI

In this example below you will see how to do a Glide Carousel & Semantic UI with some HTML / CSS and Javascript

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

Thumbnail
This awesome code was written by yowainwright, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright yowainwright ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Glide Carousel & Semantic UI</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.12.0/css/semantic.min.css'>
<link rel='stylesheet prefetch' href='https://jeffry.in/old-jeffry-in/css/jeffry.in.css'>
<link rel='stylesheet prefetch' href='https://jeffry.in/old-jeffry-in/css/jeffry.in.slider.css'>
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lobster|Raleway:300,500,700'>

  
  
</head>

<body>

  <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 src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.glide/1.0.6/jquery.glide.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>


/*Downloaded from https://www.codeseek.co/yowainwright/glide-carousel-andamp-semantic-ui-GoggrV */
$('.slider').glide({
  autoplay: false,
  arrowsWrapperClass: 'slider-arrows',
  arrowRightText: '',
  arrowLeftText: ''
});

Comments

More from yowainwright

Stickybits Demo with Shrinked Header

Stickybits Demo with Shrinked Header

By yowainwright
CSS `position: sticky` example

CSS `position: sticky` example

By yowainwright
A Pen by Jeff Wainwright

A Pen by Jeff Wainwright

By yowainwright
Intl API exploration

Intl API exploration

By Jeff Wainwright

You Might Also Like

Daily CSS Images 10 - Pencil Jar

Daily CSS Images 10 - Pencil Jar

By Victoria Ninni Bergquist
A Pen by Jang Hyun Ju

A Pen by Jang Hyun Ju

By hj-j
Glowing goo loader

Glowing goo loader

By efollender
A Pen by Brad Westfall

A Pen by Brad Westfall

By bradwestfall
Project2: Build a Personal Portfolio Webpage

Project2: Build a Personal Portfolio Webpage

By VicentBG
CSS Toggle

CSS Toggle

By and3k5
Flashcards v2

Flashcards v2

By tipdub
Foundation Reveal error

Foundation Reveal error

By yurimorini
© 2018 - Copyright CodeSeek.co
contact email