Search This Blog

Friday, September 6, 2019

creating a multi item carousel using bootstrap and sharepoint.

Step1:

Welcome to sharepoint discussion forum, so, Today we are going to discuss how to create a multi item carousel in step by step using bootstrap and sharepoint.

Step 2 : 

First of all, We need a carousel which runs in the bootstrap framework, instead of using third-party plugins to avoid conflict.  Below is the design which we have to implement in sharepoint




Step 3 :

We have to create a separate page to implement this carousel in sharepoint.  goto - All Files->_catalogs> masterpage > assets > html > rockstarsforthemonth.html.

Paste the below code with html markup and  Sharepoint Rest api call

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Rockstars for the month</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
 
    <style type="text/css">
        .MultiCarousel { float: left; overflow: hidden; padding: 0px; width:97.5%; position:relative;
        background-color: #ededed;}
    .MultiCarousel .MultiCarousel-inner { transition: 1s ease all; float: left; }
        .MultiCarousel .MultiCarousel-inner .item { float: left;}
        .MultiCarousel .MultiCarousel-inner .item > div { text-align: center; padding:30px; margin:6px 5px 5px 6px; background:#ffffff; color:#666;}
    .MultiCarousel .leftLst, .MultiCarousel .rightLst { position:absolute; border-radius:50%;top:calc(50% - 20px); }
    .MultiCarousel .leftLst { left:14px; }
    .MultiCarousel .rightLst { right:15px; }
    .MultiCarousel .leftLst.over, .MultiCarousel .rightLst.over { pointer-events: none; background:#8a8686;     border-color: #8a8686 }
        .btn-primary {
    color: #fff;
    background-color: #bd5355;
    border-color: #bd5355;
}
     
        .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
     background-color: #bd5355;
    border-color: #bd5355;
}
        .MultiCarousel h4
        {
            margin-top: 17px;
            color:#aa2225 !important;
            font-size: 24px;
            margin-top: 30px;
            margin-bottom: 0px;
        }
       .MultiCarousel p
        {
            color:#2e2929;
            font-weight: bold;
            font-size:17px;
        }
     
        .MultiCarousel .btn:focus, .MultiCarousel .btn:active:focus, .MultiCarousel .btn.active:focus, .MultiCarousel .btn.focus, .MultiCarousel .btn:active.focus, .MultiCarousel .btn.active.focus {
           outline: none;
        }
        .MultiCarousel .img-circle
        {
            width:150px;
            height: 150px;
        }
        .MultiCarousel .btn {
           padding: 10px 12px 0px 10px;
        }
        .MultiCarousel .fa-chevron-right
        {
        padding-left:2px;


}
    </style>

</head>
<body>
<div class="container" style="margin-top:50px;">
<div class="row">
<div class="MultiCarousel" data-items="1,3,5,6" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
             
     
             
            </div>
            <div class="btn btn-primary leftLst"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
            <div class="btn btn-primary rightLst"><i class="fa fa-chevron-right" aria-hidden="true"></i></div>
        </div>
</div>

</div>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>

<script type="text/javascript">

$(document).ready(function () {

function retriveListItem()
{
 
    $.ajax
    ({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Rockstars')/items?$select=FileRef/FileRef,EmployeeName,EmployeeDepartment,IsActive&$filter=IsActive eq 1",
        type: "GET",
        headers:
        {
            "Accept": "application/json;odata=verbose",
       
        },
       
        success: function(data) 
        {
   
         $(".MultiCarousel-inner").empty();
            for (var i = 0; i < data.d.results.length; i++) 
            {
                var item = data.d.results[i];               
if(item.EmployeeName !=null && item.EmployeeDepartment !=null)
    {
                 var rockhtml ='<div class="item"><div class="image-flip" ontouchstart="this.classList.toggle("hover");">' +
                             '<div class="mainflip"> <div class="frontside"><div class="card"><div class="card-body text-center">' +
                             '<img class="img-circle" src="' + _spPageContextInfo.webAbsoluteUrl + item.FileRef + '">' +
                             '<h4 class="card-title">' + item.EmployeeName + '</h4> <p class="card-text">' + item.EmployeeDepartment + '</p></div></div></div></div></div></div>'


                  $(".MultiCarousel-inner").append(rockhtml);               
             
                }
                ResCarouselSize();
            }
        },
        error: function(data)
        {
       
            $(".MultiCarousel-inner").empty().text(data.responseJSON.error);
        }
    });
}



    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();
    retriveListItem()
 
    $(window).resize(function () {
   
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);


            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = 284.9;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = 300;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
         


    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el + ' ' + rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el + ' ' + leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el + ' ' + leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el + ' ' + rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).parent().attr("id");
        var slide = $(Parent).attr("data-slide");
              ResCarousel(ell, Parent, slide);
    }

});
    </script>


 Step 5 :

Enjoy Folks

No comments:

Post a Comment

Validating to select in sequencial order using angular

    < input type = "checkbox" (change) = "handleSelectTaskItem($event, taskItem)" [checked] = " taskItem . i...