Geniux

Owl Carousel 2

Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

Owl Navigation Fade on Hover

Show Code

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- Owl Slider 1 -->
      <div id="owlSlider1" class="owl-carousel owl-theme">
        <!-- Start item 1 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 1 -->

        <!-- Start item 2 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 2 -->

        <!-- Start item 3 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 3 -->

        <!-- Start item 4 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 4 -->

        <!-- Start item 5 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 5 -->

        <!-- Start item 6 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 6 -->
      </div>
      <!-- /Owl Slider 1 -->
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Owl Navigation Fade & Slide on Hover

Show Code

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- Owl Slider 2 -->
      <div id="owlSlider2" class="owl-carousel owl-theme">
        <!-- Start item 1 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 1 -->

        <!-- Start item 2 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 2 -->

        <!-- Start item 3 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 3 -->

        <!-- Start item 4 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 4 -->

        <!-- Start item 5 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 5 -->

        <!-- Start item 6 -->
        <div class="item">
          <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- End item 6 -->
      </div>
      <!-- /Owl Slider 2 -->
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Owl Side Navigation

Show Code

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <!-- Owl Slider 3 -->
      <div class="owlSlider3">
        <div id="owlSlider3" class="owl-carousel owl-theme">
          <!-- Start item 1 -->
          <div class="item">
            <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          </div>
          <!-- End item 1 -->

          <!-- Start item 2 -->
          <div class="item">
            <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          </div>
          <!-- End item 2 -->

          <!-- Start item 3 -->
          <div class="item">
            <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          </div>
          <!-- End item 3 -->

          <!-- Start item 4 -->
          <div class="item">
            <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          </div>
          <!-- End item 4 -->

          <!-- Start item 5 -->
          <div class="item">
            <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          </div>
          <!-- End item 5 -->

          <!-- Start item 6 -->
          <div class="item">
            <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
          </div>
          <!-- End item 6 -->
        </div>
      </div>
      <!-- /Owl Slider 3 -->
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Custom Dots

Inner Dots - Slide

Inner Dots - Fade

Show Code

<!-- Owl Custom Dots -->
<div class="owlCustomDots">
  <div id="owlCustomDots" class="owl-carousel owl-theme">
    <!-- Start item 1 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
    <!-- Start item 2 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
    <!-- Start item 3 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
  </div>
</div>
<!-- Owl Custom Dots -->

Show Code

<!-- Owl Inner Dots -->
<div class="owlInnerDots">
  <div id="owlInnerDots" class="owl-carousel owl-theme">
    <!-- Start item 1 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
    <!-- Start item 2 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
    <!-- Start item 3 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
  </div>
</div>
<!--/ Owl Inner Dots -->

Show Code

<!-- Owl Inner Dots Fade -->
<div class="owlDotsFade">
  <div id="owlInnerDotsFade" class="owl-carousel owl-theme">
    <!-- Start item 1 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
    <!-- Start item 2 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
    <!-- Start item 3 -->
    <div class="item">
      <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
    </div>
  </div>
</div>
<!--/ Owl Inner Dots Fade -->

Owl Partners Logo Slider

Show Code

<div class="container-fluid no-padding">
  <div class="row-fluid">
    <div id="logoSlider" class="owl-carousel owl-theme">
      <!-- Start logo 1 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 1 -->

      <!-- Start logo 2 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 2 -->

      <!-- Start logo 3 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 3 -->

      <!-- Start logo 4 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 4 -->

      <!-- Start logo 5 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 5 -->

      <!-- Start logo 6 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 6 -->

      <!-- Start logo 7 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 7 -->

      <!-- Start logo 8 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 8 -->

      <!-- Start logo 9 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 9 -->

      <!-- Start logo 10 -->
      <div class="item">
        <div class="logo-item">
          <div class="logo-item-img">
            <a href="#"><img src="assets/images/demo-img/gnx-logo.jpg" data-rjs="2" alt="Logo Image" /></a>
          </div>
        </div>
      </div>
      <!-- End logo 10 -->

    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Slick Slider

The last carousel you'll ever need

Slick Dots Navigation

Show Code

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h4 class="m-b-15">Slick Dots Navigation</h4>
      <!-- Slider-1 -->
      <div class="Slider-1">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Slick Side Navigation

Show Code

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h4>Slick Side Navigation</h4>
      <!-- Slider-2 -->
      <div class="slider Slider-2">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
        <img class="img-responsive" src="assets/images/demo-img/gnx-450x300.jpg" data-rjs="2" alt="Image">
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Slick Center Mode

Show Code

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h4 class="m-b-15">Slick Center Mode</h4>
      <div class="Slider-3">
        <!-- Slider-3 Center Mode -->
        <div class="slider slider-for m-b-30">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg"  data-rjs="2" alt="Image">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
          <img class="img-responsive" src="assets/images/demo-img/gnx-900x600.jpg" data-rjs="2" alt="Image">
        </div>
        <!-- Slider Thumbs -->
        <div class="slider slider-nav">
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
          <div><img class="img-responsive" src="assets/images/demo-img/gnx-thumb.jpg" data-rjs="2" alt="Image"></div>
        </div>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Bootstrap Carousel

Full Width Layout - Custom Container

Show Code

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="myCarousel-1" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel-1" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel-1" data-slide-to="1"></li>
          <li data-target="#myCarousel-1" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="assets/images/demo-img/gnx-bg.jpg" alt="Image">
          </div>

          <div class="item">
            <img src="assets/images/demo-img/gnx-bg.jpg" alt="Image">
          </div>

          <div class="item">
            <img src="assets/images/demo-img/gnx-bg.jpg" alt="Image">
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel-1" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel-1" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

Bootstrap Carousel

Full Width Layout - No Margin - Fluid Container

Show Code

<div class="container-fluid">
  <div class="row">
    <div class="col-md-12 no-padding">
      <div id="myCarousel-2" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel-2" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel-2" data-slide-to="1"></li>
          <li data-target="#myCarousel-2" data-slide-to="2"></li>
        </ol>
        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="assets/images/demo-img/gnx-bg.jpg" alt="Image">
          </div>

          <div class="item">
            <img src="assets/images/demo-img/gnx-bg.jpg" alt="Image">
          </div>

          <div class="item">
            <img src="assets/images/demo-img/gnx-bg.jpg" alt="Image">
          </div>
        </div>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#myCarousel-2" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel-2" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
  </div><!-- /.row -->
</div><!-- /.container -->

# Shortcodes 1

# Shortcodes 2

# Shortcodes 3

# Shortcodes 4

Owl Carousel 2

Owl Navigation Fade on Hover

Owl Navigation Fade & Slide on Hover

Owl Side Navigation

Custom Dots

Inner Dots - Slide

Inner Dots - Fade

Owl Partners Logo Slider

Slick Slider

Slick Dots Navigation

Slick Side Navigation

Slick Center Mode

Bootstrap Carousel

Bootstrap Carousel