Created
March 22, 2017 19:17
-
-
Save noogler617/c61013f59e664ae2a67c429f611966a1 to your computer and use it in GitHub Desktop.
This is an Image slide that I built using apples abstract photo's. I used jQuery HTML and CSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Image slider</title> | |
| <link rel="stylesheet" type="text/css" href="../imageslide/imgslide.css"> | |
| </head> | |
| <body> | |
| <br> | |
| <div class="container"> | |
| <header><br> | |
| <h1>jQuery Content Slider</h1><br> | |
| </header> | |
| <img src="../imageslide/prev.png" alt="prevouis" id="prev"> | |
| <div id="slider"> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide one</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract1.jpg" alt="abstract" class="image"> | |
| </div> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide two</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract2.jpg" alt="abstract" class="image"> | |
| </div> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide three</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract3.jpg" alt="abstract" class="image"> | |
| </div> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide four</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract4.jpg" alt="abstract" class="image"> | |
| </div> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide five</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract5.jpg" alt="abstract" class="image"> | |
| </div> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide six</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract6.jpg" alt="abstract" class="image"> | |
| </div> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide seven</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract7.jpg" alt="abstract" class="image"> | |
| </div> | |
| <div class="slide"> | |
| <div class="slide-copy"> | |
| <h2>slide eight</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> | |
| </div> | |
| <img src="../imageslide/Abstract/Abstract8.jpg" alt="abstract" class="image"> | |
| </div> | |
| </div> | |
| <img src="../imageslide/next.png" alt="next" id="next"> | |
| </div> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> | |
| <script src="../imageslide/imgslide.js"></script> | |
| </body> | |
| </html> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body { | |
| font-family: 'Ariel', sans-serif; | |
| font-size: 15px; | |
| color: #fff; | |
| background: #333; | |
| line-height: 1.5em; | |
| } | |
| a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| h1 { | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| .container { | |
| width: 980px; | |
| margin: 40px auto; | |
| overflow: hidden; | |
| } | |
| #slider { | |
| width: 940px; | |
| height: 350px; | |
| position: relative; | |
| overflow: hidden; | |
| float: left; | |
| padding: 3px; | |
| border: #666 solid 2px; | |
| border-radius: 5px; | |
| } | |
| .slide { | |
| position: absolute; | |
| } | |
| .slide-copy { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| padding: 20px; | |
| background: #7f7f7f; | |
| background: rgba(0,0,0,0.5); | |
| } | |
| .image { | |
| width: 940px; | |
| height: 350px; | |
| } | |
| #prev, #next { | |
| float: left; | |
| margin-top: 150px; | |
| cursor: pointer; | |
| position: relative; | |
| z-index: 100; | |
| } | |
| #prev { | |
| margin-right: -20px; | |
| } | |
| #next { | |
| margin-left: -20px; | |
| } | |
| $(document).ready(function(){ | |
| //set options | |
| // | |
| // | |
| var speed = 5000; | |
| var autoswitch = true; | |
| var autoswitch_speed = 4000 | |
| // Add initial active class | |
| $('.slide').first().addClass('.active'); | |
| //Hide all slides | |
| $('.slide').hide(); | |
| //show first slide | |
| $('.slide').show(); | |
| $('#next').on('click', nextSlide); | |
| $('#prev').on('click', prevSlide); | |
| if(autoSwitch == true){ | |
| setInterval(nextSlide,autoswitch_speed); | |
| } | |
| //switch to next slide | |
| function nextSlide(){ | |
| $('.active').removeClass('active').addClass('oldActive'); | |
| if($('.oldActive').is(':last-child')){ | |
| $('.slide').first().addClass('active'); | |
| } else { | |
| $('.oldActive').next().addClass('active'); | |
| } | |
| $('.oldActive').removeClass('oldActive'); | |
| $('.slide').fadeOut(speed); | |
| $('.active').fadeIn(speed); | |
| } | |
| //prev Slide | |
| function prevSlide(){ | |
| $('.active').removeClass('active').addClass('oldActive'); | |
| if($('.oldActive').is(':first-child')){ | |
| $('.slide').first().addClass('active'); | |
| } else { | |
| $('.oldActive').prev().addClass('active'); | |
| } | |
| $('.oldActive').removeClass('oldActive'); | |
| $('.slide').fadeOut(speed); | |
| $('.active').fadeIn(speed); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment