Unconventional slideshow

Developer
Laura Moraiti
Size
2,567 Kb
Views
30,360
  1. Unconventional slideshow Previews
  2. Unconventional slideshow HTML Codes
  3. Unconventional slideshow CSS Codes
  4. Unconventional slideshow JS Codes

How do I make an unconventional slideshow?

What is a unconventional slideshow? How do you make a unconventional slideshow? This script and codes were developed by Laura Moraiti on 27 August 2022, Saturday.

Unconventional slideshow Previews
IQ Test

Unconventional slideshow - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Unconventional slideshow</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="top"></div>
<div class="row"> <div class="small-element black">1</div> <div class="small-element coral">2</div> <div class="small-element red">3</div> <div class="small-element blue">4</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Unconventional slideshow - Script Codes CSS Codes

.black { background-color: black;
}
.coral { background-color: coral;
}
.red { background-color: red;
}
.blue { background-color: blue;
}
* { box-sizing: border-box; color: white;
}
.top { height: 500px; position: relative;
}
.top .current { width: 20%; height: 0; position: absolute; top: 100%; left: 40%;
}
.row { width: 100%; height: 200px; overflow: hidden; position: relative;
}
.row .small-element { width: 33.3333%; line-height: 200px; text-align: center; font-size: 2em; font-weight: bold; float: left; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out;
}

Unconventional slideshow - Script Codes JS Codes

$('.row').on('click', '.small-element', function(){ var ele = $(this), top = ele.clone(), row = ele.clone(); top .addClass('current') .appendTo('.top') .animate({ width: '100%', height: '100%', top: 0, left: 0 }, 500, function() { ele.animate({'width': '0'}, 500, function(){ row.appendTo('.row'); }); var bro = $(this).prev('.current'); $('.current').not($(this)).not(bro).remove(); }); $('.small-element[style="width: 0px;"]').remove();
});
Unconventional slideshow - Script Codes
Unconventional slideshow - Script Codes
Home Page Home
Developer Laura Moraiti
Username Fixie
Uploaded August 27, 2022
Rating 3
Size 2,567 Kb
Views 30,360
Do you need developer help for Unconventional slideshow?

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!

Laura Moraiti (Fixie) Script Codes
Name
Fun responsive split layout
WIP accordion without jQueryUI
Music equalizer bars with jQuery
Responsive Equal Height Columns using jQuery
WIP
Striped background for a container with more than one element
Reusable simple dropdown
Simple and clean form
A Pen by Laura Moraiti
Easy hover effect for videos
Create amazing marketing copy 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!