Append & Prepend

In this example below you will see how to do a Append & Prepend with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Em-An, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Em-An ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Append & Prepend</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
    <div class="small">
        <ul class="small-ul list-unstyled" data-small="">
            <li><img src="http://placehold.it/100x100/000/FFF?text=img01" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/111/FFF?text=img02" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/222/FFF?text=img03" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/333/FFF?text=img04" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/444/FFF?text=img05" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/555/FFF?text=img06" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/666/FFF?text=img07" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/777/FFF?text=img08" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/888/FFF?text=img09" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/999/FFF?text=img10" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/888/FFF?text=img11" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/777/FFF?text=img12" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/666/FFF?text=img13" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/555/FFF?text=img14" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/444/FFF?text=img15" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/333/FFF?text=img16" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/222/FFF?text=img17" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/111/FFF?text=img18" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/000/FFF?text=img19" width="100" height="100" alt="small" /></li>
            <li><img src="http://placehold.it/100x100/111/FFF?text=img20" width="100" height="100" alt="small" /></li>
        </ul>
        <span class="small-span"><i class="fa fa-arrow-circle-right fa-3x"></i></span>
        <span class="small-span"><i class="fa fa-arrow-circle-left fa-3x"></i></span>
    </div>
</div>
<div class="container">
    <div class="small2">
        <ul class="small-ul list-unstyled" data-small2="">
            <li><img src="http://placehold.it/200x150/000/FFF?text=img01" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/111/FFF?text=img02" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/222/FFF?text=img03" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/333/FFF?text=img04" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/444/FFF?text=img05" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/555/FFF?text=img06" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/666/FFF?text=img07" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/777/FFF?text=img08" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/888/FFF?text=img09" width="200" height="150" alt="small" /></li>
            <li><img src="http://placehold.it/200x150/999/FFF?text=img10" width="200" height="150" alt="small" /></li>
        </ul>
        <span class="small-span"><i class="fa fa-arrow-circle-right fa-3x"></i></span>
        <span class="small-span"><i class="fa fa-arrow-circle-left fa-3x"></i></span>
    </div>
</div>
<div class="container">
    <div class="small3">
        <ul class="small-ul list-unstyled" data-small3="">
            <li><img src="http://placehold.it/300x200/000/FFF?text=img01" width="300" height="200" alt="small" /></li>
            <li><img src="http://placehold.it/300x200/111/FFF?text=img02" width="300" height="200" alt="small" /></li>
            <li><img src="http://placehold.it/300x200/222/FFF?text=img03" width="300" height="200" alt="small" /></li>
            <li><img src="http://placehold.it/300x200/333/FFF?text=img04" width="300" height="200" alt="small" /></li>
            <li><img src="http://placehold.it/300x200/444/FFF?text=img05" width="300" height="200" alt="small" /></li>
            <li><img src="http://placehold.it/300x200/555/FFF?text=img06" width="300" height="200" alt="small" /></li>
            <li><img src="http://placehold.it/300x200/666/FFF?text=img07" width="300" height="200" alt="small" /></li>
        </ul>
        <span class="small-span"><i class="fa fa-arrow-circle-right fa-3x"></i></span>
        <span class="small-span"><i class="fa fa-arrow-circle-left fa-3x"></i></span>
    </div>
    <br><br><a href="https://plus.google.com/u/0/102673066293922475859">Code By Em An</a>
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Em-An/append-andamp-prepend-PzBZAd */
.small,
.small2,
.small3 {
    font-size: 14px;
    margin-top: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.small .small-ul,
.small2 .small-ul,
.small3 .small-ul {
    display: flex;
    position: absolute;
    top: 0
}

.small .small-ul li,
.small2 .small-ul li,
.small3 .small-ul li {
    margin-left: 5px
}

.small .small-span,
.small2 .small-span,
.small3 .small-span {
    position: absolute;
    top: calc(50% - 20px);
    opacity: .1;
    cursor: pointer;
    color: #FFF;
    text-shadow: 1px 2px 10px rgba(0, 0, 0, 1);
}

.small .small-span:hover,
.small2 .small-span:hover,
.small3 .small-span:hover {
    opacity: .5
}

.small .small-span:first-of-type,
.small2 .small-span:first-of-type,
.small3 .small-span:first-of-type {
    right: 10px
}

.small .small-span:last-of-type,
.small2 .small-span:last-of-type,
.small3 .small-span:last-of-type {
    left: 10px
}

/*Downloaded from https://www.codeseek.co/Em-An/append-andamp-prepend-PzBZAd */
/////////////////////////////////////////////////
////////////////////////////////////////////////
//Update: https://codepen.io/Em-An/pen/VPrdPW //
//////////////////////////////////////////////
//////////////////////////////////////////////

/*global $, jQuery, console, alert, prompt */
$(document).ready(function() {
    'use strict';
    // All Variable =============================================================================================
    var smallParent = $('.small'),
        smallUlLi = $('.small .small-ul li'),
        smallSpan = $('.small .small-span'),
        smallSetLeft,
        smallRunLeft;
    // Reset Li length ==========================================================================================
    smallUlLi.parent().attr('data-small', smallUlLi.length);
    // Reset Width And Height ===================================================================================
    smallParent.width(smallParent.parent().width()).height(smallUlLi.height());
    smallUlLi.parent().width(smallUlLi.width() * (smallUlLi.length + 1));
    // Run Set ==================================================================================================
    smallSetLeft = function() {
        var smallUlLi = $('.small .small-ul li');
        if (smallUlLi.length <= smallUlLi.parent().data('small')) {
            smallUlLi.parent().append('<li>' + smallUlLi.first().html() + '</li>').children().first().animate({
                marginLeft: -smallUlLi.first().outerWidth()
            }, 1000, function() {
                smallUlLi.first().remove();
            });
        }
    };
    // Run Auto Slider ==========================================================================================
    smallRunLeft = setInterval(smallSetLeft, 1000);
    // Pause ====================================================================================================
    smallParent.mouseenter(function() {
        clearInterval(smallRunLeft);
    });
    // Resume ===================================================================================================
    smallParent.mouseleave(function() {
        smallRunLeft = setInterval(smallSetLeft, 1000);
    });
    // Right ====================================================================================================
    smallSpan.first().on('click', function() {
        var smallUlLi = $('.small .small-ul li'),
            smallLastLi = smallUlLi.last().html();
        if (smallUlLi.length <= smallUlLi.parent().data('small')) {
            smallUlLi.parent().prepend('<li>' + smallLastLi + '</li>').children().last().remove();
        }
    });
    // Left ====================================================================================================
    smallSpan.last().on('click', function() {
        var smallUlLi = $('.small .small-ul li'),
            smallFirstLi = smallUlLi.first().html();
        if (smallUlLi.length <= smallUlLi.parent().data('small')) {
            smallUlLi.parent().append('<li>' + smallFirstLi + '</li>').children().first().remove();
        }
    });
    /***********************************************************************************/
    /************************************* .small2 *************************************/
    /***********************************************************************************/
    // All Variable =============================================================================================
    var smallParent2 = $('.small2'),
        smallUlLi2 = $('.small2 .small-ul li'),
        smallSpan2 = $('.small2 .small-span'),
        smallSetLeft2,
        smallRunLeft2;
    // Reset Li length ==========================================================================================
    smallUlLi2.parent().attr('data-small2', smallUlLi2.length);
    // Reset Width And Height ===================================================================================
    smallParent2.width(smallParent2.parent().width()).height(smallUlLi2.height());
    smallUlLi2.parent().width(smallUlLi2.width() * (smallUlLi2.length + 1));
    // Run Set ==================================================================================================
    smallSetLeft2 = function() {
        var smallUlLi2 = $('.small2 .small-ul li');
        if (smallUlLi2.length <= smallUlLi2.parent().data('small2')) {
            smallUlLi2.parent().append('<li>' + smallUlLi2.first().html() + '</li>').children().first().animate({
                marginLeft: -smallUlLi2.first().outerWidth()
            }, 2000, function() {
                smallUlLi2.first().remove();
            });
        }
    };
    // Run Auto Slider ==========================================================================================
    smallRunLeft2 = setInterval(smallSetLeft2, 2000);
    // Pause ====================================================================================================
    smallParent2.mouseenter(function() {
        clearInterval(smallRunLeft2);
    });
    // Resume ===================================================================================================
    smallParent2.mouseleave(function() {
        smallRunLeft2 = setInterval(smallSetLeft2, 2000);
    });
    // Right ====================================================================================================
    smallSpan2.first().on('click', function() {
        var smallUlLi2 = $('.small2 .small-ul li'),
            smallLastLi2 = smallUlLi2.last().html();
        if (smallUlLi2.length <= smallUlLi2.parent().data('small2')) {
            smallUlLi2.parent().prepend('<li>' + smallLastLi2 + '</li>').children().last().remove();
        }
    });
    // Left ====================================================================================================
    smallSpan2.last().on('click', function() {
        var smallUlLi2 = $('.small2 .small-ul li'),
            smallFirstLi2 = smallUlLi2.first().html();
        if (smallUlLi2.length <= smallUlLi2.parent().data('small2')) {
            smallUlLi2.parent().append('<li>' + smallFirstLi2 + '</li>').children().first().remove();
        }
    });
    /***********************************************************************************/
    /************************************* .small3 *************************************/
    /***********************************************************************************/
    // All Variable =============================================================================================
    var smallParent3 = $('.small3'),
        smallUlLi3 = $('.small3 .small-ul li'),
        smallSpan3 = $('.small3 .small-span'),
        smallSetLeft3,
        smallRunLeft3;
    // Reset Li length ==========================================================================================
    smallUlLi3.parent().attr('data-small3', smallUlLi3.length);
    // Reset Width And Height ===================================================================================
    smallParent3.width(smallParent3.parent().width()).height(smallUlLi3.height());
    smallUlLi3.parent().width(smallUlLi3.width() * (smallUlLi3.length + 1));
    // Run Set ==================================================================================================
    smallSetLeft3 = function() {
        var smallUlLi3 = $('.small3 .small-ul li');
        if (smallUlLi3.length <= smallUlLi3.parent().data('small3')) {
            smallUlLi3.parent().append('<li>' + smallUlLi3.first().html() + '</li>').children().first().animate({
                marginLeft: -smallUlLi3.first().outerWidth()
            }, 3000, function() {
                smallUlLi3.first().remove();
            });
        }
    };
    // Run Auto Slider ==========================================================================================
    smallRunLeft3 = setInterval(smallSetLeft3, 3000);
    // Pause ====================================================================================================
    smallParent3.mouseenter(function() {
        clearInterval(smallRunLeft3);
    });
    // Resume ===================================================================================================
    smallParent3.mouseleave(function() {
        smallRunLeft3 = setInterval(smallSetLeft3, 3000);
    });
    // Right ====================================================================================================
    smallSpan3.first().on('click', function() {
        var smallUlLi3 = $('.small3 .small-ul li'),
            smallLastLi3 = smallUlLi3.last().html();
        if (smallUlLi3.length <= smallUlLi3.parent().data('small3')) {
            smallUlLi3.parent().prepend('<li>' + smallLastLi3 + '</li>').children().last().remove();
        }
    });
    // Left ====================================================================================================
    smallSpan3.last().on('click', function() {
        var smallUlLi3 = $('.small3 .small-ul li'),
            smallFirstLi3 = smallUlLi3.first().html();
        if (smallUlLi3.length <= smallUlLi3.parent().data('small3')) {
            smallUlLi3.parent().append('<li>' + smallFirstLi3 + '</li>').children().first().remove();
        }
    });
});

/////////////////////////////////////////////////
////////////////////////////////////////////////
//Update: https://codepen.io/Em-An/pen/VPrdPW //
//////////////////////////////////////////////
//////////////////////////////////////////////

Comments