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

A Pen by Ekaterina

A Pen by Ekaterina

By EkaterinaM
IDB Test

IDB Test

By martinhecher
SVG Icon Buttons

SVG Icon Buttons

By ettrics
freeCodeCamp : Build a Tribute Page

freeCodeCamp : Build a Tribute Page

By callmeDan
A Pen by Maciej

A Pen by Maciej

By Infinyty
Henry Berge, for Free Code Camp

Henry Berge, for Free Code Camp

By argoc
Test svg stroke animation

Test svg stroke animation

By loac-fr
Simple hamburger menu icon animation

Simple hamburger menu icon animation

By BenR
© 2018 - Copyright CodeSeek.co
contact email