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

Mine Sweeper

Mine Sweeper

By maxwell_alexius
Sign Up and Login

Sign Up and Login

By apederson21
Fade In .remove()

Fade In .remove()

By danmalarkey
include: LabeledGrid

include: LabeledGrid

By kintel
A Pen by mansour

A Pen by mansour

By mansourkacem
Zadatak #1

Zadatak #1

By Revange
bulding-44a-house

bulding-44a-house

By ViacheslavChyvalskiy
A Pen by Alesya

A Pen by Alesya

By Nepershyna
© 2018 - Copyright CodeSeek.co
contact email