Simple carousel

Developer
Berkin
Size
3,098 Kb
Views
24,288
  1. Simple carousel Previews
  2. Simple carousel HTML Codes
  3. Simple carousel CSS Codes
  4. Simple carousel JS Codes

How do I make an simple carousel?

What is a simple carousel? How do you make a simple carousel? This script and codes were developed by Berkin on 10 September 2022, Saturday.

Simple carousel Previews
IQ Test

Simple carousel - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>simple carousel</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <section class="carousel js-hotel-carousel"> <ul class="carousel-container">	<li class="carousel-items"><img src="http://lorempixel.com/840/460/sports" alt="description of photo 1" /></li>	<li class="carousel-items"><img src="http://lorempixel.com/840/460/sports/2" alt="description of photo 2" /></li>	<li class="carousel-items"><img src="http://lorempixel.com/840/460/sports/3" alt="description of photo 3" /></li> </ul> </section> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple carousel - Script Codes CSS Codes

/* carousel { */
.carousel { width: 840px; height: 460px; position: relative; overflow: hidden;
}
.carousel-container { list-style: none; padding: 0; margin: 0; position: absolute; top: 0; left: 0; height: 100%; width: 99999px;
}
.carousel-items { float: left;
}
.carousel-next,
.carousel-prev { background: #003580; cursor: pointer; border: 1px solid #fff; color: #fff; border-radius: 5px; padding: 10px; &:hover { }
}
.carousel-next:active,
.carousel-prev:active { -webkit-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, .3); -moz-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, .3); box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, .3);
}
.carousel-next { position: absolute; top: 50%; right: 10px; z-index: 10;
}
.carousel-prev { position: absolute; top: 50%; left: 10px;
}
.carousel-items { position: relative;
}
.carousel-items-title { background: #000; opacity: .7; color: #fff; font-size: 24px; position: absolute; bottom: 0; left: 0; right: 0; padding: 20px;
}
/* carousel } */

Simple carousel - Script Codes JS Codes

// there are tests on the tests folder.
// the carousel has next/prev buttons and auto slide options.
// Automatic slide pauses on hover, there is a test for that in test folder.
;(function($, window, document, undefined) { 'use strict'; // define variables var pluginName = "carousel", defaultOptions = { auto: false, prevButtonText: "Prev", nextButtonText: "Next" }; /** * Carousel plugin constructor. * @constructor * @param {string} selector * @param {json} options */ function Carousel(selector, options) { this.options = $.extend({}, defaultOptions, options); this.selector = $(selector); this.container = this.selector.find('.carousel-container'); this.items = this.container.find('.carousel-items'); this.itemSize = this.items.size(); this.current = 0; if (this.options.auto) { this.start(); this.selector .on('mouseenter.carousel', $.proxy(this.stop, this)) .on('mouseleave.carousel', $.proxy(this.start, this)); } this.init(); } /** * Initiate the plugin. */ Carousel.prototype.init = function() { this.width = this.selector.width(); this.nextButton = $('<button class="carousel-next">' + this.options.nextButtonText + '</button>'); this.prevButton = $('<button class="carousel-prev">' + this.options.prevButtonText + '</button>'); this.nextButton.appendTo(this.selector); this.prevButton.appendTo(this.selector); this.nextButton.on('click.carousel', $.proxy(this.next, this)); this.prevButton.on('click.carousel', $.proxy(this.prev, this)); this._setTitles(); } /** * Set titles from img alt attributes */ Carousel.prototype._setTitles = function() { this.items.each(function() { var $this = $(this), title = $this.find('img').attr("alt"); $('<div class="carousel-items-title" />').html(title).appendTo($this); }); } /** * Go to next slide * */ Carousel.prototype.next = function() { this.current += 1; if (this.current === this.itemSize) { this.current = 0; } this.container.animate({ left: -this.current * this.width }); } /** * Go to prev slide * */ Carousel.prototype.prev = function() { if (this.current === 0) { this.current = this.itemSize; } this.current -= 1; this.container.animate({ left: -this.current * this.width }); } /** * Start auto slide * */ Carousel.prototype.start = function() { var self = this; this.intervalId = setInterval(function() { self.next(); }, this.options.auto); } /** * Stop auto slide * */ Carousel.prototype.stop = function() { clearInterval(this.intervalId); } /** * Add plugin to jQuery.prototype * * @param {json} options * @return {jQuery} chainable jQuery class */ $.fn[pluginName] = function(options) { // jQuery each returns this, so it is chainable return this.each(function() { if (!$.data(this, 'plugin_' + pluginName)) { $.data(this, 'plugin_' + pluginName, new Carousel(this, options)); } }); }
})(jQuery, window, document); window.onload = function() { $('.js-hotel-carousel').carousel({ auto: 3000 }); };
Simple carousel - Script Codes
Simple carousel - Script Codes
Home Page Home
Developer Berkin
Username berkin
Uploaded September 10, 2022
Rating 3
Size 3,098 Kb
Views 24,288
Do you need developer help for Simple 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!

Berkin (berkin) Script Codes
Name
Touch Carousel
Background origin, content-box
IOS style alphabetic scroll
Tether control
Javascript - Selection Sort
CSS switch, works with swipes
JQuery UI datepicker with arrow pointing the input
Pull to Refresh
Big factorial
Hackerrank test
Create amazing Facebook ads 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!