jQuery- Image (Carousel sliders)/ list of items navigate to next or previous with small dot circles / pagination with circles functionality

on
This is my own logic code...working perfectly..worked with any combination.


Please find the Output below:








Recent output is below:

OUPUT 1:



OUTPUT 2:



















The code is below:



<html>
 <head>
  <style>
ul
{
 background-color:green;
 height:20px;
 color:white;
 margin:0px;
 line-height:30px;
 height:30px;
}

ul li

                {list-style:none;

                float:left;

                border-right:1px solid;

                padding-right:10px;

                padding-left:0px;       

                line-height:30px;       

                height:30px;

        

         }

 

ul li:last-child {

    border:none;

  }


ul li:hover, .activeMenu

                {
               

                background-color:black;

                line-height:30px;       

                height:30px;

               

                border-right:1px solid;
               }

.displayBlock
{
display:block;
}

.displayNone
{
 display:none;
}

.nextSection
{
margin-top:100px;color:white;
float:right;

}

.prevSection
{
margin-top:100px;color:white;
float:left;
margin-left:-25px;
position:absolute;
}

.clsMainDiv
{
background-color:red;margin-left:34px;margin-top:25px;
min-width:1043px;
margin-bottom:-10px;
}

.dot
{
height:8px;
width:8px;
border:1px solid white;
border-radius:50%;
display:inline-block;
margin-right:10px;
position:relative;
}

.dot:hover
{
 background-color:dimGray;
}

.activeDotCircle
{
 background-color:green;
}

</style>
  <script src="~\VB\jquery-3.3.1.js"></script>
  <script>
$(document).ready(function(){

var menuJsonObject=
{
 "TestLinks":{ //Level
   "TabsrHeadersItems":{ //Sub Level
     "Tabs":"false",      //Inner Level - 1
     "Misc": [{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"},
{"content":"New Portal Site"},{"content":"New Portal Site"},{"content":"New Portal Site"}



], //Inner Level - 2
     "New":"Test" // Inner Level -3
   },

  },
  "MenuOne":{
   "TabsrHeadersItems":{
    "Tabs":true,
     "TabsItemsValues":[{"content":"New Values1"},{"content":"New Values2"},{"content":"New Values3"}],
      "TabsHeaders":[{"content":"Header 1"}]
     }
   }

}


//2 - i; Total no of keys in main object

var levelsLength=(Object.keys(menuJsonObject)).length;



//Bind all menu while DOM loading

for(var a=0;a<levelsLength;a++)
{
  var li='<li id="'+Object.keys(menuJsonObject)[a]+'">'+Object.keys(menuJsonObject)[a]+'</li>';
  $("#menuUL").append(li);
}



var j=0;
var k=0;
var i=0;
$('ul li').mouseover(function(){

var currentMenuID=$(this).attr('id');
$('#'+currentMenuID).addClass('activeMenu');
$('#'+currentMenuID).siblings().removeClass('activeMenu');

$('#testDiv').empty();



var itemsTotal=1;


if(i>0)
{
 $(mainDiv).addClass('displayNone');
}


var contentMainDivCount=0;
var mainDivCount=0;
var innerSubLevelsValuesLength=
(Object.keys(
menuJsonObject
[currentMenuID]
[Object.keys(menuJsonObject[currentMenuID])]
[Object.keys(
menuJsonObject[currentMenuID]
[Object.keys(menuJsonObject[currentMenuID])]
)[1]]
)

).length;

var dotCircleMainDiv=$('<div id="dotCircleMainDiv" style="padding-top: 260px; margin-bottom: 10px; margin-left: 500px;"></div>');

      for(var item=0;item<innerSubLevelsValuesLength;item++)
      {


var contentDiv=$('<div id="contentDiv_'+itemsTotal+'"></div>'); // All elements should be start with $ symbol then only we can bind items into this element.

var contentValueDiv=$('<div style="margin-bottom:10px;width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"></div>');


var contentValue=menuJsonObject
[currentMenuID]
[Object.keys(menuJsonObject[currentMenuID])]
[Object.keys(
menuJsonObject[currentMenuID]
[Object.keys(menuJsonObject[currentMenuID])]
)[j+1]][item]

[Object.keys(
menuJsonObject
[currentMenuID]
[Object.keys(menuJsonObject[currentMenuID])]
[Object.keys(
menuJsonObject[currentMenuID]
[Object.keys(menuJsonObject[currentMenuID])]
)[j+1]][item]
)];

$(contentValueDiv).append(contentValue);

$(contentDiv).append(contentValueDiv);

var contentMainDiv;
var mainDiv;
var nextDiv;
var prevDiv;

var dotCircleDiv;

var totalMainDivs=Math.ceil(innerSubLevelsValuesLength/54);

if(item % 9 == 0 || item == 0 )
{



if(contentMainDivCount % 6 == 0)
{
  mainDivCount++;

var clsMainDivCondition=(mainDivCount>1)? "clsMainDiv displayNone" : "clsMainDiv";

mainDiv=$('<div class="'+clsMainDivCondition+'" id="mainDiv_'+mainDivCount+'"></div>');

var conditionActiveDotCircle= (mainDivCount==1)? "dot activeDotCircle" : "dot notActiveDotcircle";

dotCircleDiv=$('<div class="'+conditionActiveDotCircle+'" id="dotCircle_'+mainDivCount+'" ></div>');

$("#testDiv").append(mainDiv);

$(dotCircleMainDiv).append(dotCircleDiv);

$("#testDiv").append(dotCircleMainDiv);

if(mainDivCount == 1 && mainDivCount < totalMainDivs)
{
nextDiv=$('<div id="nextLinkDiv_'+mainDivCount+'" class="nextSection" ><a href="" id="nextLink">Next</a></div>');

$("#mainDiv_"+mainDivCount).append(nextDiv);
}
else if(mainDivCount>1 && mainDivCount < totalMainDivs)
{

nextDiv=$('<div id="nextLinkDiv_'+mainDivCount+'" class="nextSection" ><a href="" id="nextLink">Next</a></div>');
prevDiv=$('<div id="prevLinkDiv_'+mainDivCount+'" class="prevSection" ><a href="" id="prevLink">Prev</a></div>');

$("#mainDiv_"+mainDivCount).append(nextDiv);
$("#mainDiv_"+mainDivCount).append(prevDiv);

}
else
{

 if(mainDivCount == totalMainDivs && mainDivCount != 1)
{

 prevDiv=$('<div id="prevLinkDiv_'+mainDivCount+'" class="prevSection" ><a href="" id="prevLink">Prev</a></div>');
 $("#mainDiv_"+mainDivCount).append(prevDiv);
}



}


}


 contentMainDivCount++;
 contentMainDiv=$('<div id="contentMainDiv_'+contentMainDivCount+'" style="font-size:11px;background-color:gray;float:left;border:red 1px solid;padding:15px;margin-left:5px;min-width:130px;"></div>');

}



 $(contentMainDiv).append(contentDiv);
 $(mainDiv).append(contentMainDiv);


itemsTotal++;

      }

}); // End of mouse over



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

var firstParentID=$($(this).parent().parents()[0]).attr('id');

var firstParentIDValue=firstParentID.split('_')[1];
var nextParentCount= parseInt(firstParentID.split('_')[1])+1;

$('#'+firstParentID).addClass('displayNone');
$('#mainDiv_'+nextParentCount).removeClass('displayNone');

$('#dotCircle_'+nextParentCount).removeClass('notActiveDotcircle').addClass('activeDotCircle');
$('#dotCircle_'+nextParentCount).siblings().removeClass('activeDotCircle').addClass('notActiveDotcircle');

});



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

var prevFirstParentID=$($(this).parent().parents()[0]).attr('id');

var prevFirstParentIDValue=prevFirstParentID.split('_')[1];
var prevParentCount= parseInt(prevFirstParentID.split('_')[1])-1;


$('#'+prevFirstParentID).addClass('displayNone');
$('#mainDiv_'+prevParentCount).removeClass('displayNone');

$('#dotCircle_'+prevParentCount).removeClass('notActiveDotcircle').addClass('activeDotCircle');
$('#dotCircle_'+prevParentCount).siblings().removeClass('activeDotCircle').addClass('notActiveDotcircle');



});

var dotCirc=$('#dotCircleMainDiv').children();
var dotCircleCount=0;


$(document).on('click','.notActiveDotcircle',function(e){
e.preventDefault();


var currentDotCircleID=$(this).attr('id');
var currentDotCircleIDValue=currentDotCircleID.split('_')[1];

$('#mainDiv_'+currentDotCircleIDValue).removeClass('displayNone');
$('#mainDiv_'+currentDotCircleIDValue).siblings().not('#dotCircleMainDiv').addClass('displayNone');

$('#'+currentDotCircleID).removeClass('notActiveDotcircle').addClass('activeDotCircle');
$('#'+currentDotCircleID).siblings().removeClass('activeDotCircle').addClass('notActiveDotcircle');

});


});

    </script>
   </head>
   <body>
    <ul id="menuUL"></ul>
    <div style="background-color:red;color:white;position:absolute;min-height:260px;" id="testDiv"></div>
   </body>
  </html>

THANKS



Comments

Post a Comment