one page scroll slider wheel - Free Download One Page Scroll With Slider Wheel Indicator

Free Download One Page Scroll With Slider Wheel Indicator

Posted on

This time I will share jQuery Plugin and tutorial about One Page Scroll With Slider Wheel Indicator, hope it will help you in programming stack.

one page scroll slider wheel - Free Download One Page Scroll With Slider Wheel Indicator
File Size: 1.31 MB
Views Total: 2376
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

A jQuery/CSS solution to create a creative one page scroll website with a wheel slider where the indicator travels in a circle round the wheel while switching between page sections.

Compatible with the latest Bootstrap framework and requires Bootstrap’s scrollspy component.

How to use it:

1. Load jQuery library, Bootstrap’s stylesheet and scrollspy plugin in your HTML document.

1 <link rel="stylesheet" href="/path/to/bootstrap.min.css" />
2 <script src="/path/to/jquery.min.js"></script>
3 <script src="/path/to/bootstrap.js"></script>

2. Code the HTML for the one page scroll website & slider wheel.

001 <div class="dvd_fixed_slider">
002   <div class="slides_bg">
003     <div id="slide_01" style="background-image: url('assets/backg-agronomic.jpg')"></div>
004     <div id="slide_02" style="background-image: url('assets/backg-telecom.jpg')"></div>
005     <div id="slide_03" style="background-image: url('assets/backg-electrical.jpg')"></div>
006     <div id="slide_04" style="background-image: url('assets/backg-computer.jpg')"></div>
007     <div id="slide_05" style="background-image: url('assets/backg-business.jpg')"></div>
008   </div>
009   <div class="slides_fg">
010     <ul class="nav navbar-nav">
011     <!-- Slide 01 -->
012     <li id="slide-01" class="row slide_nth active">
013       <a class="d-none" href="#slide_01"></a>
014       <div class="col-md-7 col-xl-6 mw-100">
015         <div class="slide_imag mx-auto ml-md-0 ml-lg-auto mr-lg-0">
016           <div class="slide_dial">
017             <img src="assets/dial-disk-md.png" class="d-none d-md-block" />
018             <img src="assets/dial-disk-sm.png" class="d-block d-md-none" />
019           </div>
020           <div class="slide_thumb_bg"
021              style="background-image: url('assets/thumb-agronomic.png')">
022           </div>
023           <div class="slide_dots_wheel">
024             <a href="#slide_01"><i class="slide_dot"></i><span>Agronomic</span></a>
025             <a href="#slide_05"><i class="slide_dot"></i><span>Business</span></a>
026             <a href="#slide_04"><i class="slide_dot"></i><span>Computer</span></a>
027             <a href="#slide_03"><i class="slide_dot"></i><span>Electrical</span></a>
028             <a href="#slide_02"><i class="slide_dot"></i><span>Telecommunications</span></a>
029           </div>
030         </div>
031       </div>
032       <div class="col-md-5 col-xl-6 mw-100 justify-content-start justify-content-md-center">
033         <div class="slide_text mx-auto mr-md-0 ml-lg-0 text-center text-md-left">
034           <h3 class="title">Agronomic Engineering</h3>
035           <p class="description">
036             Lorem ipsum dolor sit amet consectetur adipiscing elit cursus sociis est malesuada,
037             cubilia convallis parturient aliquam diam posuere ultricies ullamcorper elementum odio nam.
038           </p>
039           <a class="button" href="">Learn more</a>
040         </div>
041       </div>
042     </li>
043     <!-- Slide 02 -->
044     <li id="slide-02" class="row slide_nth">
045       <a class="d-none" href="#slide_02"></a>
046       <div class="col-md-7 col-xl-6 mw-100">
047         <div class="slide_imag mx-auto ml-md-0 ml-lg-auto mr-lg-0">
048           <div class="slide_dial">
049             <img src="assets/dial-disk-md.png" class="d-none d-md-block" />
050             <img src="assets/dial-disk-sm.png" class="d-block d-md-none" />
051           </div>
052           <div class="slide_thumb_bg"
053              style="background-image: url('assets/thumb-telecom.png')">
054           </div>