Panel Slider

Developer
Michael MartinSmucker
Size
5,242 Kb
Views
22,264
  1. Panel Slider Previews
  2. Panel Slider HTML Codes
  3. Panel Slider CSS Codes
  4. Panel Slider JS Codes

How do I make an panel slider?

Https://github.com/mlms13/panel-slider. What is a panel slider? How do you make a panel slider? This script and codes were developed by Michael MartinSmucker on 28 September 2022, Wednesday.

Panel Slider Previews
IQ Test

Panel Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Panel Slider</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<ul class="slider"> <li class="con-red"> <div class="tab"><i class="icon-beaker"></i></div> <div class="content"> <h2>Research at Nursing</h2> <ul class="col"> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> <ul> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> </div> </li> <li class="con-green"> <div class="tab"><i class="icon-bar-chart"></i></div> <div class="content"> <h2>Economic Impact</h2> <ul class="col"> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> <ul> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> </div> </li> <li class="con-blue"> <div class="tab"><i class="icon-book"></i></div> <div class="content"> <h2>Graduation Rates</h2> <ul class="col"> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> <ul> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> </div> </li> <li class="con-gold"> <div class="tab"><i class="icon-briefcase"></i></div> <div class="content"> <h2>Employment Rates</h2> <ul class="col"> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> <ul> <li>Lorem ipsum dolor</li> <li>Sit amet, consectetur</li> <li>Adipisicing elit</li> </ul> </div> </li>
</ul>
<p class="details"><a href="https://github.com/mlms13/panel-slider">Get the jQuery plugin on Github</a>. Full disclosure, it's pretty half-baked at this point. If you feel like making improvements, I won't complain.</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Panel Slider - Script Codes CSS Codes

html { background: #eaeaea; margin: 30px;
}
.slider { height: 122px; list-style: none; margin: 0 auto; min-width: 800px; max-width: 960px; padding: 0;
}
.slider > li { background: #fff; border-right: 24px solid; box-sizing: border-box; height: 100%; width: 100%;
}
.slider > li > .tab { border-top: 4px solid transparent; cursor: pointer; float: left; padding: 23px 0 27px; transition: 300ms; width: 122px;
}
.slider > li > .tab > i:before { background: rgba(255, 255, 255, 0.3); border-radius: 50%; color: #fff; display: block; font-size: 26px; line-height: 68px; margin: 0 27px; text-align: center; width: 68px;
}
.slider > li > .content { height: 100%; left: 140px; overflow: hidden; padding: 8px; position: absolute;
}
.slider > li > .content > h2 { margin: 0;
}
.slider > li > .content > ul { color: #666; float: left; font-size: 13px; list-style: square; margin: 12px; padding-left: 20px;
}
.slider > li.active > .tab { box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.25);
}
.slider > li.con-red { border-right-color: #c0374e;
}
.slider > li.con-red > .tab { background: #c0374e;
}
.slider > li.con-red > .tab:hover { background: #cc4e63;
}
.slider > li.con-red > .content > h2 { color: #c0374e;
}
.slider > li.con-red.active > .tab { border-top-color: #d56e7f;
}
.slider > li.con-green { border-right-color: #9cbe4f;
}
.slider > li.con-green > .tab { background: #9cbe4f;
}
.slider > li.con-green > .tab:hover { background: #abc869;
}
.slider > li.con-green > .content > h2 { color: #9cbe4f;
}
.slider > li.con-green.active > .tab { border-top-color: #bbd387;
}
.slider > li.con-blue { border-right-color: #0098b9;
}
.slider > li.con-blue > .tab { background: #0098b9;
}
.slider > li.con-blue > .tab:hover { background: #00b5dd;
}
.slider > li.con-blue > .content > h2 { color: #0098b9;
}
.slider > li.con-blue.active > .tab { border-top-color: #06d3ff;
}
.slider > li.con-gold { border-right-color: #e9a82a;
}
.slider > li.con-gold > .tab { background: #e9a82a;
}
.slider > li.con-gold > .tab:hover { background: #ecb54a;
}
.slider > li.con-gold > .content > h2 { color: #e9a82a;
}
.slider > li.con-gold.active > .tab { border-top-color: #f0c46f;
}
a { color: #07b;
}
.details { color: #666; margin: 40px auto 1em; max-width: 960px; font-size: 14px;
}

Panel Slider - Script Codes JS Codes

// Credit where credit is due:
// Daniel Paradise did the initial design
// The icons are from FontAwesome
// The code, including the jQuery plugin, is mine.
// You can find the plugin on github:
// https://github.com/mlms13/panel-slider
(function ($) { "use strict"; $.fn.panelSlider = function (options) { var settings = $.extend({ initialPanel: -1, // 0-based index of the initial panel to be shown, -1 = random slideDuration: 600, // duration (in ms) of the sliding animation autoPlay: true, // whether slides should rotate automatically delay: 10000 // the time (in ms) between slide rotations when autoPlay is true }, options); return this.each(function () { var $container = $(this), $slides = $container.children('li'), tabWidth = $slides.find('.tab').width(), // assume all tabs are the same width timer, // to keep track of automatic slide rotation moveToRight, moveToLeft, revealSlide, runSlideshow; // a function to transition slides to the correct right position moveToRight = function ($slide, method) { var index = $slides.index($slide), // the slide's index within the context of all slides negIndex = ($slides.length - index) - 1, // the slide's index, counting from the right leftPosition; // the target destance from the left edge of the slideshow container // return if the slide is already collapsed to the right if ($slide.data('collapsed-right')) { return; } // calculate the target distance from the left edge of the slideshow // leftPosition = the width of the container, minus // (width of this slide's tab + the tabs of all slides to the right) leftPosition = $container.width() - (tabWidth + (tabWidth * negIndex)); // move the slide to its target position on the right $slide[method]({'left': leftPosition + 'px'}, settings.slideDuration); // keep track of the slide being collapsed $slide.data('collapsed-left', false); $slide.data('collapsed-right', true); }; // a function to transition slides to the correct left position moveToLeft = function ($slide, method) { var index = $slides.index($slide); // the slide's index within the context of all slides // return if the slide is already collapsed to the left if ($slide.data('collapsed-left')) { return; } // move the slide to its target position on the left $slide[method]({'left': (tabWidth * index) + 'px'}); // keep track of the slide being collapsed $slide.data('collapsed-left', true); $slide.data('collapsed-right', false); }; // function determines which direction to move sibling slides to collapse them revealSlide = function (index, animate) { // pick the right method, based on the animate parameter // if no parameter was passed, use the 'animate' function by default var method = (animate || animate === undefined) ? 'animate' : 'css'; // start knocking out the currently-visible slide $container.children('.active').removeClass('active') .children('.content')[method]({ 'opacity': 0, 'top': '122px' }); // each slide after the one we're revealing should collapse right $slides.slice(index + 1).each(function () { moveToRight($(this), method); }); // each slide before and including the revealed slide should move left $slides.slice(0, index + 1).each(function () { moveToLeft($(this), method); }); // keep track of the active slide $slides.removeClass('active') .eq(index).data({ 'collapsed-left': false, 'collapsed-right': false }) .addClass('active') .children('.content') .css({ 'top': -122 }) .delay(200) .animate({ 'opacity': 1, 'top': 0 }); }; runSlideshow = function () { if (settings.autoPlay) { timer = window.setInterval(function () { var currentIndex = $slides.index($container.children('.active')), nextIndex = (currentIndex + 1 === $slides.length) ? 0 : currentIndex + 1; revealSlide(nextIndex); }, settings.delay); } }; // intialize some general slideshow styles $container.css({'position': 'relative', 'overflow': 'hidden'}); $slides.css({'position': 'absolute'}); // calculate the width of the slide $slides.css({ 'width': ($container.width() - (($slides.length - 1) * tabWidth)) + 'px' }); // pick a random starting slide, if needed if (settings.initialPanel === -1) { settings.initialPanel = Math.floor(Math.random() * $slides.length); } // initialize the slides by revealing one without animation revealSlide(settings.initialPanel, false); // run the slideshow (it will check to make sure autoPlay is on) runSlideshow(); // handle click events $slides.on('click', function () { // ignore clicks if the slide is already active if ($(this).hasClass('active')) { return; } revealSlide($(this).index()); // clear the current loop and restart the slideshow window.clearInterval(timer); runSlideshow(); }); }); };
}(jQuery));
$('.slider').panelSlider({ delay: 4000
});
Panel Slider - Script Codes
Panel Slider - Script Codes
Home Page Home
Developer Michael MartinSmucker
Username mlms13
Uploaded September 28, 2022
Rating 4
Size 5,242 Kb
Views 22,264
Do you need developer help for Panel Slider?

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!

Michael MartinSmucker (mlms13) Script Codes
Name
Boxes and Headings
Responsive nav collapses to a button
A Pen by Michael MartinSmucker
Table with rounded corners
Drinking Habits Mockup
CSS Floppy Disk Icon
Fancy Textarea
Sticker Tiles
SVG Donut Loading Spinner
Simple Breadcrumbs
Create amazing video scripts 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!