Skip to content

Instantly share code, notes, and snippets.

@jpark3000

jpark3000/carousel.js

Forked from ksolo/carousel.js
Last active August 29, 2015 13:56
Show Gist options
  • Save jpark3000/8852288 to your computer and use it in GitHub Desktop.
Save jpark3000/8852288 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Apprentice revised this gist Feb 6, 2014. 2 changed files with 25 additions and 5 deletions.
    25 changes: 22 additions & 3 deletions carousel.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,23 @@
    // Shorthand for $(document).ready();
    $(function(){
    // Your code goes here...
    });

    $('#next_frame').on('click', function(e) {
    e.preventDefault;
    var currentPos = ($('.frames > li').css('right')).replace(/px/, '');

    if (currentPos < 361.00000000001) {
    $('.frames > li').animate({right: '+=360' }, 650);
    };
    });


    $('#previous_frame').on('click', function(e) {
    e.preventDefault;

    var currentPos = ($('.frames > li').css('right')).replace(/px/, '');

    if (currentPos > 359) {
    $('.frames > li').animate({right: '-=360'}, 650);
    };
    });

    });
    5 changes: 3 additions & 2 deletions main.css
    View file
    Original file line number Diff line number Diff line change
    @@ -26,9 +26,10 @@
    margin:0;
    }
    .frames > li{
    /* position: What value should position have?; */
    position: relative;
    float:left;
    width:33.33333%; /* 100 / number of frames */
    right: 0px;
    }
    .carousel img{
    display:block;
    @@ -66,4 +67,4 @@ a#previous_frame {
    }
    a#next_frame {
    margin-left: 380px;
    }
    }
  2. Kevin Solorio created this gist Aug 2, 2013.
    4 changes: 4 additions & 0 deletions carousel.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    // Shorthand for $(document).ready();
    $(function(){
    // Your code goes here...
    });
    35 changes: 35 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <title>Image Carousel</title>
    </head>
    <body>
    <div class="container">
    <div class="carousel_controls">
    <a href="#" id="previous_frame">&lt;</a>
    <a href="#" id="next_frame">&gt;</a>
    </div>

    <div class="carousel">
    <ul class="frames">
    <li>
    <h2>Zip</h2>
    <img src="http://f.cl.ly/items/3e332b2e0B3d311a1U1X/wargames.jpg" />
    </li>
    <li>
    <h2>Zap</h2>
    <img src="http://f.cl.ly/items/2h0Q3P0t0B3Q0N370u43/businessdude.jpg" />
    </li>
    <li>
    <h2>Zop</h2>
    <img src="http://f.cl.ly/items/3i2V2V0D3n293d0y2y0U/tron.jpg" />
    </li>
    </ul>
    </div>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="carousel.js"></script>
    </body>
    </html>
    69 changes: 69 additions & 0 deletions main.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    /*
    * Attribution: http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel/
    *
    * DON'T VISIT THE ABOVE SITE FOR ANSWERS UNLESS YOU'RE
    * COMPLETELY STUMPED
    *
    * ...also, it will not help you solve the JavaScript :)
    */

    .container {
    width: 360px;
    height: 228px;
    margin: 0 auto;
    }

    .carousel{
    overflow:hidden;
    width:100%;
    }
    .frames{
    list-style:none;
    /* position: What value should position have?; */
    width:300%;
    overflow:hidden;
    padding:0;
    margin:0;
    }
    .frames > li{
    /* position: What value should position have?; */
    float:left;
    width:33.33333%; /* 100 / number of frames */
    }
    .carousel img{
    display:block;
    width:100%;
    max-width:100%;
    }
    .carousel h2{
    font-size:1em;
    padding:0.5em;
    position:absolute;
    bottom:10px;
    left:10px;
    text-align:left;
    margin: 0;
    color:#fff;
    background-color:rgba(99,0,0,0.75);
    }

    .carousel_controls a {
    font-family: monospace;
    text-decoration: none;
    position: absolute;
    margin-top: 99px;
    width: 30px;
    line-height: 30px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 30px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    }
    a#previous_frame {
    margin-left: -50px;
    }
    a#next_frame {
    margin-left: 380px;
    }