Click Carousel

Developer
Mike
Size
7,081 Kb
Views
6,072
  1. Click Carousel Previews
  2. Click Carousel HTML Codes
  3. Click Carousel CSS Codes
  4. Click Carousel JS Codes

How do I make an click carousel?

An infinite carousel with an optional retraction effect.. What is a click carousel? How do you make a click carousel? This script and codes were developed by Mike on 13 January 2023, Friday.

Click Carousel Previews
IQ Test

Click Carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Click Carousel</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="carousel slide" data-ride="carousel" id="myCarousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#myCarousel"></li> <li data-slide-to="1" data-target="#myCarousel"></li> <li data-slide-to="2" data-target="#myCarousel"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <img alt="First slide" class="first-slide" src="../sites/all/themes/Porto_sub/img/pic01.jpg"> <div class="container"> <div class="carousel-caption">	<!-- Banner -->	<div id="banner">	<h3 id="H3_4">	Make your company a world wide known name with us!	</h3>	<p id="P_5">	Lorem ipsum dolor sit amet, co nsectetuer adipiscing elit, sed dia no nummy nibh.<br id="BR_6" /> <a href="#" id="A_7">GET IT NOW!</a>	</p>	</div> </div> </div> </div> <div class="item"> <img alt="Second slide" class="second-slide" src="../sites/all/themes/Porto_sub/img/pic02.jpg"> <div class="container"> <div class="carousel-caption"> <h1> We take the guesswork out of finding the best hardware solution for your iPad based POS system. </h1> <p> We understand that putting together the right hardware to make your POS system run smoothly can be tricky. So, we’ve worked hard to remove the guesswork. </p> <p> <a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a> </p> </div> </div> </div> <div class="item"> <img alt="Third slide" class="third-slide" src="../sites/all/themes/Porto_sub/img/pic03.jpg"> <div class="container"> <div class="carousel-caption"> <h4 class="lead tall"> Start today and we'll give you everything your business needs to succeed. </h4> <p> We know that running a business isn’t easy, And, you certainly shouldn’t have to worry about what happens if your cash drawer stops opening or if your receipt printer goes down. </p> <p> <a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a> </p> </div> </div> </div> </div><a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span aria-hidden="true" class="mega-octicon octicon-chevron-left"></span> <span class="sr-only">Previous</span></a> <a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span aria-hidden="true" class= "mega-octicon octicon-chevron-right"></span> <span class="sr-only">Next</span></a>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Click Carousel - Script Codes CSS Codes

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */
body { padding-bottom: 40px; color: #5a5a5a;
}
/* CUSTOMIZE THE NAVBAR
-------------------------------------------------- */
/* Special class on .container surrounding .navbar, used for positioning it into place. */
.navbar-wrapper { position: absolute; top: 0; right: 0; left: 0; z-index: 20;
}
/* Flip around the padding for proper display in narrow viewports */
.navbar-wrapper > .container { padding-right: 0; padding-left: 0;
}
.navbar-wrapper .navbar { padding-right: 15px; padding-left: 15px;
}
.navbar-wrapper .navbar .container { width: auto;
}
/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
/* Carousel base class */
.carousel { height: 500px; margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption { z-index: 10;
}
/* Declare heights because of positioning of img element */
.carousel .item { height: 500px; background-color: #777;
}
.carousel-inner > .item > img { position: absolute; top: 0; left: 0; min-width: 100%; height: 500px;
}
/* MARKETING CONTENT
-------------------------------------------------- */
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 { margin-bottom: 20px; text-align: center;
}
.marketing h2 { font-weight: normal;
}
.marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px;
}
/* Featurettes
------------------------- */
.featurette-divider { margin: 80px 0; /* Space out the Bootstrap 
 more */
}
/* Thin out the marketing headings */
.featurette-heading { font-weight: 300; line-height: 1; letter-spacing: -1px;
}
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 768px) { /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; } .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; } /* The navbar becomes detached from the top, so we round the corners */ .navbar-wrapper .navbar { border-radius: 4px; } /* Bump up size of carousel content */ .carousel-caption p { margin-bottom: 20px; font-size: 21px; line-height: 1.4; } .featurette-heading { font-size: 50px; }
}
@media (min-width: 992px) { .featurette-heading { margin-top: 120px; }
}
#H3_4 { clear: both; color: rgb(55, 55, 55); height: 26px; width: 880px; perspective-origin: 440px 18px; transform-origin: 440px 18px; border: 0px none rgb(55, 55, 55); font: normal normal normal normal 22px / 26.4px 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; margin: 0px 0px 5px; outline: rgb(55, 55, 55) none 0px; padding: 10px 0px 0px;
}/*#H3_4*/
#P_5 { color: rgb(119, 119, 119); height: 60px; width: 880px; perspective-origin: 440px 30px; transform-origin: 440px 30px; border: 0px none rgb(119, 119, 119); font: normal normal normal normal 12px / 20px Arial, sans-serif; margin: 0px 0px 15px; outline: rgb(119, 119, 119) none 0px;
}/*#P_5*/
#BR_6 { color: rgb(119, 119, 119); border: 0px none rgb(119, 119, 119); font: normal normal normal normal 12px / 20px Arial, sans-serif; outline: rgb(119, 119, 119) none 0px;
}/*#BR_6*/
#A_7 { color: rgb(255, 255, 255); cursor: pointer; display: inline-block; height: 30px; min-width: 65px; text-align: center; text-decoration: none; vertical-align: middle; width: 70px; perspective-origin: 45px 15px; transform-origin: 45px 15px; background: rgb(55, 55, 55) none repeat scroll 0% 0% / auto padding-box border-box; border: 0px none rgb(255, 255, 255); font: normal normal bold normal 11px / 30px Arial, sans-serif; margin: 10px 0px 0px; outline: rgb(255, 255, 255) none 0px; padding: 0px 10px; transition: all 0.5s ease 0s;
}/*#A_7*/

Click Carousel - Script Codes JS Codes

//---------------------------------------------------------------------
//Click Carousel
//Date: September 20, 2010
//File: click-carousel.min.js
//Author: Joseph McCullough - @Joe_Query - http://www.vertstudios.com/
//Purpose: An infinite carousel with an optional retraction effect.
//---------------------------------------------------------------------
function isset(obj) { if ((typeof obj == 'undefined') || (obj === null) || (obj === "")) { return false; } else { return true; }
}
(function(jQuery) { /******************plugin arrayShift************** Description: Takes an index of an array, places it at another index, and shifts the rest of the array into place PARAMETERS: index; //The index being moved newLocation; //The new index of index Postcondition: jQuery object has been altered ****/ jQuery.fn.arrayShift = function(index, newLocation) { //Copy all matched elements of the jQuery object to an array var tempArr = jQuery.makeArray(jQuery(this)); //Loop through arguments and convert strings into integers. for (var i = 0; i < arguments.length; i++) { if (isNaN(arguments[i])) { if (arguments[i] == "first") { //The first index of the array arguments[i] = 0; } else if (arguments[i] == "last") { //The last index of the array arguments[i] = tempArr.length - 1; } } else { arguments[i] = parseInt(arguments[i], 10); } } //Create a temporary copy of array[index] var tempVal = tempArr[index]; if (index > newLocation) { //For every index starting from [index] until (but not including) //the index newLocation, Copy the value of the previous index to the //current index for (i = index; i > newLocation; i--) { tempArr[i] = tempArr[i - 1]; } //Copy the stored value to the newLocation index tempArr[newLocation] = tempVal; } else if (index < newLocation) { //For every index starting from [index] up until (but not including) //[newLocation], copy the value of the next index into the current index. for (i = index; i < newLocation; i++) { tempArr[i] = tempArr[i + 1]; } //Copy the stored value to the newLocation index tempArr[newLocation] = tempVal; } return jQuery(tempArr); }; jQuery.fn.getIndexOf = function(array) { //Assume value isn't found var index = false; //Define scope var value = jQuery(this); //Initiate index counter var i = 0; jQuery(array).each(function() { if (jQuery(this).equalTo(jQuery(value))) { index = i; } //Increment index counter i++; }); return index; }; jQuery.fn.equalTo = function(object) { isEqual = !jQuery(this).not(jQuery(object)).length; return isEqual; }; jQuery.fn.selectIndex = function(index) { }; jQuery.fn.fakeFloat = function(options, callback) { var defaults = { direction: "left", margin: 0, offset: 0, speed: 0 }, settings = jQuery.extend(defaults, jQuery.fn.fakeFloat.defaults, options); //Initialize counter var i = 0; //Initialize element width var elemWidth = 0; jQuery(this).each(function() { elemWidth = jQuery(this).width(); if (settings.direction == "left") { jQuery(this).animate({ "left": ((settings.margin) + elemWidth) * i + (settings.offset) + 'px' }, settings.speed); } else { jQuery(this).animate({ "right": ((settings.margin) + elemWidth) * i + (settings.offset) + 'px' }, settings.speed); } i++; }); if (typeof callback == 'function') { setTimeout(function() { callback.call(this); }, settings.speed); } return this; }; /******************Plug-in clickCarousel ***************** Description: Sets up a click-based slider that moves the clicked element to the end of a row of elements. Also shifts the elements in view. PARAMETERS: direction //The direction the carousel will shift. Either "left" or "right" margin //The space between the shifting elements of the carousel hideSpeed //How long the shifting element takes to retract (in ms) shiftSpeed //How long the elements take to shift (in ms) clicker //The element that triggers the shifting of the slide when clicked shifting //The elements that are shifting shiftOnly //A boolean variable that deactivates the retract functions when set to true left //The element that shifts the carousel left right //The element that shifts the carousel right *********************************************************/ jQuery.fn.clickCarousel = function(options) { //Define scope var container = jQuery(this); //Initialize animation boolean flag if (typeof container.animating == 'undefined') { container.animating = false; } //List default values var defaults = { direction: "left", margin: 0, hideSpeed: 500, shiftSpeed: 500, clicker: jQuery(this).children(), shifting: jQuery(this).children(), shiftOnly: false, left: jQuery("#carouselLeft"), right: jQuery("#carouselRight") }, settings = jQuery.extend({}, defaults, options); //Set fakeFloat defaults jQuery.fn.fakeFloat.defaults = { margin: settings.margin, direction: settings.direction }; jQuery(settings.shifting).fakeFloat(); //Check to see if the click-trigger is the same as what's being shifted. //Must be checked in this scope since settings.shifting undergoes //Array manipulation, thus rendering the equality test illogical after the first run. var shiftingIsClicker = jQuery(settings.clicker).equalTo(settings.shifting); //If the carousel is being used for shifting AND retraction effect if (settings.shiftOnly === false) { jQuery(settings.clicker).click(function() { //Define Scope var clicked = jQuery(this); //Initialize index of clicked var index; //If shifting elements and the click-trigger elements are the same if (shiftingIsClicker) { index = jQuery(clicked).getIndexOf(settings.shifting); } else //The index must be put in the context of what's being shifted { index = jQuery(clicked).parentsUntil(settings.shifting).getIndexOf(settings.shifting); //Make sure settings.shifting is the container of what will be shifted...not the click-trigger clicked = settings.shifting[index]; } //If the container is not animated if (container.animating === false) { //The container is now animating. container.animating = true; //Hide the clicked element's target jQuery(clicked).slideUp(settings.hideSpeed, function() { //Take the clicked element's target and add it to the end of the array //Also shift the clicker in order to keep settings.shifting and settings.clicker consistent. settings.shifting = settings.shifting.arrayShift(index, "last"); settings.clicker = settings.clicker.arrayShift(index, "last"); //Move and Align the Elements jQuery(settings.shifting).fakeFloat({ speed: settings.shiftSpeed }); //Reveal the element on the other side jQuery(clicked).show(0, function() { //The container has finished animating container.animating = false; }); }); } }); } //Create new scroller object that will hold variables throughout this section. var scroller = {}; //Copies the first elemement to the shiftingElement property and primes //The index and newLocation properties to be used later in the arrayShift. scroller.firstToLast = function() { //Copy the first element. scroller.shiftingElement = settings.shifting[0]; //First index will be shifted to last index scroller.index = "first"; scroller.newLocation = "last"; }; //Copies the last elemement to the shiftingElement property and primes //The index and newLocation properties to be used later in the arrayShift. scroller.lastToFirst = function() { //Copy the last element. scroller.shiftingElement = settings.shifting[settings.shifting.length - 1]; //Last index will be shifted to first index scroller.index = "last"; scroller.newLocation = "first"; }; //Determines how the indexes should shift depending upon the direction of //The carousel and which way the carousel will shift scroller.getIndexes = function(shiftDirection) { if (shiftDirection === "left") { if (settings.direction === "left") { scroller.firstToLast(); } else if (settings.direction === "right") { scroller.lastToFirst(); } } else if (shiftDirection === "right") { if (settings.direction === "left") { scroller.lastToFirst(); } else if (settings.direction === "right") { scroller.firstToLast(); } } }; //Executes the carousel scroll animation scroller.scroll = function() { //The container is now animating. container.animating = true; //Hide the shifting element jQuery(scroller.shiftingElement).hide(); //Shift the Array settings.shifting = settings.shifting.arrayShift(scroller.index, scroller.newLocation); //Readjust elements visually jQuery(settings.shifting).fakeFloat({ speed: settings.shiftSpeed }, function() { //Show the shifting element jQuery(scroller.shiftingElement).show(); //The container has finished animating container.animating = false; }); }; /*********************************************************/ /** End scroll method definitions, begin code execution **/ /*********************************************************/ //If the left property is defined if (isset(settings.left)) { //When the left property is clicked jQuery(settings.left).click(function() { //If the container is NOT animating, allow the following code to execute if (container.animating === false) { //Determine how the array indexes should shift scroller.getIndexes("left"); //Execute the scrolling animation scroller.scroll(); } }); } //If the right property is defined if (isset(settings.right)) { //When the right property is clicked jQuery(settings.right).click(function() { //If the container is NOT animating, allow the following code to execute if (container.animating === false) { //Determine how the array indexes should shift scroller.getIndexes("right"); //Execute the scrolling animation scroller.scroll(); } }); } }; jQuery.fn.frontpush = function(array) { //Number of elements in the jQuery object var numElements = jQuery(this).length; //Convert matched elements to an array for processing. var thisArray = jQuery.makeArray(jQuery(this)); //For the number of elements in the jQuery object for (var i = 0; i < numElements; i++) { //Prime an array at the end array.push(""); } //For each original element of the array, go backwards and copy for (i = (array.length); i > numElements; i--) { var j = i - 1; //Account for array.length and array[index] discrepancy array[j] = array[j - numElements]; } //Plug in the new values into the front of the array for (i = 0; i < numElements; i++) { array[i] = thisArray[i]; } return jQuery(array); };
})(jQuery); //End document
Click Carousel - Script Codes
Click Carousel - Script Codes
Home Page Home
Developer Mike
Username honchoman
Uploaded January 13, 2023
Rating 3
Size 7,081 Kb
Views 6,072
Do you need developer help for Click Carousel?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mike (honchoman) Script Codes
Name
A Pen by Mike
Dropcap Layout
Landing-Pages Panel
Parallax backgrounds with centered content
Notificator
Free App Template for Bootstrap 3
Product page with fancy hover effect
Features Section
Social Media Button Design
Flat UI Button
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!