Media Slider

Developer
Michael Goldspinner
Size
6,880 Kb
Views
56,672
  1. Media Slider Previews
  2. Media Slider HTML Codes
  3. Media Slider CSS Codes
  4. Media Slider JS Codes

How do I make an media slider?

Media Slider is a front end module for featuring content on a website. It supports: Incremental (that is additive or sequential) cycling of content . What is a media slider? How do you make a media slider? This script and codes were developed by Michael Goldspinner on 07 July 2022, Thursday.

Media Slider Previews
IQ Test

Media Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Media Slider</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<body> <div class="section-title"><p>The Media Slider</p></div> <section id="final"> <!-- The entire unit --> <div id="media"> <!-- The Title Section: Title index matches item index --> <header id="header"><h1>The Title</h1></header> <!-- The Content Window --> <div id="media-slider"> <!-- The Content Loop --> <div id="loop"> <!-- Content: items will flow after the previous if there is room in the loop --> <div class="item" id="one"><p>A</p></div> <div class="item" id="two"><p>B</p></div> <div class="item" id="three"><p>C</p></div> <div class="item" id="four"><p>D</p></div> </div> <!-- Slider Radio Buttons: Radio Input elements index is linked to item's index --> <div id="slider-select"> <input type="radio" id="radio-item" name="item" value="A"></input> <input type="radio" id="radio-item" name="item" value="B"></input> <input type="radio" id="radio-item" name="item" value="C"></input> <input type="radio" id="radio-item" name="item" value="D"></input> </div> </div> <!-- Navigation Buttons: Left & Right div with id's for specificity--> <div id="media-buttons"> <div class="button" id="left"> < </div> <div class="button" id="right"> > </div> </div> </div> </section>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Media Slider - Script Codes CSS Codes

body { overflow: hidden; height: 850px; margin: 0; padding: 0;
}
a { text-decoration: none; color: inherit;
}
.section-title { transition: background-color 1s; position: relative; z-index: 25; background-color: rgba(0,0,0,0.6); width: 100%; height: 100px; margin: 0px auto; /*margin-top: 50px;*/
}
.section-title p { position: relative; text-align: center; font-family: sans-serif; font-size: 30pt; color: white; margin: 0; padding-top: 25px;
}
footer { position: absolute; z-index: 10; background-color: #444; /*border: solid 1px black;*/ width: 99.8%; height: 35px; bottom: 0px; margin: 0; padding: 0;
}
/*______________________________________________*/
#media { transition: height 0.5s; position: relative; z-index: 5; overflow: visible; border: solid 1px black; width: 525px; height: 400px; margin: 0 auto; top: 50px;
}
#header { background-color: #dedede; background-color: #444; border-bottom: solid 1px black; height: 50px; width: 100%; margin: 0;
}
#header h1 { font-family: sans-serif; color: white; padding: 10px 25px; margin: 0;
}
#media-slider { transition: height 0.5s; overflow: hidden; background-color: #222; width: 100%; height: 300px;
}
#loop { transition: inherit; position: relative; overflow: visible; transition: left 0.5s; width: 2150px; height: 300px; left: 0px;
}
.spacer-1 { width: 100%; height: 25%;
}
.spacer-2 { float: left; width: 42%; height: 75%;
}
.item { position: relative; display: inline-block; float: left; /* border: solid 1px red; */ width: 525px; height: 300px;
}
.item p { /*padding: 70px 220px;*/ width: 90px; margin: 0 auto; font-size: 100pt; color: white; font-family: sans-serif;
}
#one { background-color: red;
}
#two { background-color: blue; height: 350px;
}
#three { background-color: orange; height: 200px;
}
#four { background-color: purple; height: 500px;
}
#slider-select { position: absolute; overflow: visible; width: 128px; height: 25px; bottom: 55px; left: 38%; margin: 0 auto; text-align: center;
}
input { /*position: relative;*/ -webkit-appearance: none; list-style: none; display: block; float: left; background-color: rgba(0,0,0,0.3); border: solid 1px rgba(0,0,0,0.2); border-radius: 50%; width: 20px; height: 20px; margin: 0 5px; bottom: 200px;
}
input:checked { background-color: rgba(0,0,0,0.5);
}
label { -webkit-appearance: none;
}
#slider-select li:hover, .radio
.radio { background-color: black; opacity: .5;
}
#media-buttons { background-color: #444; width: 100%; height: 50px;
}
.button { transition: background-color 0.2s; position: relative; cursor: pointer; float: left; clear: right; width: 50%; height: 40px; text-align: center; padding: 5px 0; font-size: 25pt; color: white;
}
.button:hover { background-color: #333;
}
.button-bg { background-color: white;
}

Media Slider - Script Codes JS Codes

$(document).ready(function() {
// --------------------------------
// = WIREFRAME =
// --------------------------------
// <div> - #media | Main Container
// <div> - #media-title | Title of Current Shown Content
// <div> - #media-slider | Container for Shown Content
// <div> -#loop | Container for Positioning Content
// <div>/<li> Individual items of the loop
// <?> Any of the actual included content whether it's an embedded video or linked <img> or a <div> with an image-background property
// <div> - #media-input | Container for the inputs of interacting with the slider
//---------------------------------
// = $TOC - TABLE OF CONTENTS
//-----------------------------------
// :$v: Variables Defined in OOC:$v:
// -- :$v1: mediaCount
// -- :$v2: item
// -- :$v3:
// :$f: Functions Defined in OOC :$f:
// -- :$f1: media counter
//-----------------------------------
//===================================================================
//---------------------------------
// :$v1: DEFAULTS
//-----------------------------------
//_______________________________________________
// :itemCount: counte for selected media item
// :media: selector for entire container
// :mediaWindow: selector for container displaying media content
// :loop: selector for container positioning media content
// :loopInt: returns pure number data type from loop's left property (gets the number without "px")
// :title: selector for media title
// :titleCount: counter for media title | Should match the itemCount
// :input: selector for input radio element
// :inputCurrent: selector for current input radio relative to itemCount
// ------------------------------------------------------------- var itemCount = 0 ; var media = $('#media') //selector for entire container var mediaWindow = $('#media-slider'); //selector for container displaying content (images/video) var loop = $('#loop'); //selector for the container positioning content within the mediaWindow var loopInt = parseInt(loop.css('left')); var title = $('#header > h1'); var titleCount = 0; var input = $('input'); var inputCurrent = $('input').eq(itemCount); //selector for current input radio relative to itemCount console.log(itemCount);
//_______________________________________________
// :$v2: ITEMS | LIST OF LOOP ITEMS (sequential ordering) :$v2:
// -------------------------------------------------------------
// :: items are currently predefined
// :To-Do: write function to get items in the loop & index them to variables & array
// :itemsBulk: Gets all children of the loop | They are indexed in the parent object, the children method includes their indexes
// :items: By Default is empty
// :itemsFirst: The first index of items
// :itemsLast: The last index of items
// ------------------------------------------------------------- //var item1 = $('#media-slider > #loop').children('div:eq(0)'); //var item2 = $('#media-slider > #loop').children('div:eq(1)'); //var item3 = $('#media-slider > #loop').children('div:eq(2)'); //var item4 = $('#media-slider > #loop').children('div:eq(3)'); var itemsBulk = loop.children(); var items = []; var itemsFirst = items[0]; var itemsLast = items[items.length];
//_______________________________________________
// :$a1: AUTOMATED | GATHER & SET LOOP ITEMS :$a1:
// ------------------------------------------------------------
// :: Function uses for loop to enter itemsBulk items into items[] array
// :: The for loop starts at the default of items[]
// :: The for loop stops when it reaches the end of itemsBulk
// ------------------------------------------------------------ function getItems() { for (i=items.length; i<=itemsBulk.length; i++){ items[i] = itemsBulk.eq(i); }; }; getItems(); console.log('items got'); console.log(items[1]);
//_______________________________________________
// :$a2: AUTOMATED | SET INITIAL CONTENT HEIGHT :$a2:
// -------------------------------------------------------------
// :: sets initial padding of content by finding difference between the height of item & media-slider
// ------------------------------------------------------------- $(itemsFirst).children().css('padding', (($(itemsFirst).height() - parseInt($(itemsFirst).children().css('height')))/2+"px")+" " + 0); console.log('itemsFirst set');
//_______________________________________________
// :$a3: AUTOMATED | SET INITIAL INPUT CHECKED :$a3:
// -------------------------------------------------------------
// ::sets initial ::checked on input element
// ------------------------------------------------------------- inputCurrent.click();
//_____________________________________
//
// :$f1: UPDATE MEDIA COUNTER'S :$f1:
// :---:update function for itemCount & titleCount
// --------------------------------------------------------------------------------------------
// ::1-updates counters according to the event trigger
// ::2-checks and constrains counters if values fall outside accepted range
// ::3-sets title according to titleCount
// -------------------------------------------------------------------------------------------- function updateCounters(state) { switch (state) { case "left": titleCount = titleCount - 1; itemCount = itemCount - 1; break; case "right": titleCount = titleCount + 1; itemCount = itemCount + 1; break; }; // :: Counter Checks :: //--------------------- if (itemCount < 0) { itemCount = 0; } else if (itemCount > 3) { itemCount = 3; }; if (titleCount < 0) { titleCount = 0; } else if (titleCount > 3) { titleCount = 3; }; // :: Update Title :: //------------------------------------------------------------------- // :To-Do: Set up variables to assign titles using an interface menu //------------------------------------------------------------------- switch(titleCount) { case 0: title.text('Title A'); break; case 1: title.text('Title B'); break; case 2: title.text('Title C'); break; case 3: title.text('Title D'); break; }; };
//________________________________________
//
// :$f2:Vertical Center Align function does this:$f2:
//
// --------------------------------------------------------------------------------------------
// ::1-create variable with current loop height
// ::2-get content of the currently shown item
// ::3-find difference betwen loop height & content's height then divide the difference in two
// ::4-set content's top and bottom padding to the split difference
// --------------------------------------------------------------------------------------------- function vCenter() { var mediaHeight = loop.height(); var itemHeight = items[itemCount].children(); // Below Case no longer necessary because loop items are now retrieved in bulk using loop.children() and fed into the items[] array // by a for loop // switch (itemCount) { // case 0: // var itemHeight = items[this].children(); // break; // case 1: // var itemHeight = item2.children(); // break; // case 2: // var itemHeight = item3.children(); // break; // case 3: // var itemHeight = item4.children(); // break; // }; var difference = ((mediaHeight - parseInt(itemHeight.css('height')))/2+"px"); itemHeight.css('padding', difference+" 0"); };
//________________________________________
//
// :$f3: Window Resize function does this:$f3:
//
// --------------------------------------------------------------------------------------------
// ::Parameter should be itemCount
// ::1-matches itemCount with cases | upon matching case
// ::2-resizes entire media container so border aligns properly
// ::3-resizes media slider to match height of selected item
// ::4-resizes loop to match height of selected item
// ::5-calls vCenter function which vertically aligns content of the selected item (view function for method)
// -------------------------------------------------------------------------------------------- function Resize () { media.delay(200).css('height', parseInt(items[itemCount].css('height'))+100+'px'); mediaWindow.delay(200).css('height', items[itemCount].height()+'px'); loop.delay(200).css('height', items[itemCount].height()+'px'); vCenter(); // switch (item) { // case 0: // $('#media').delay(200).css('height', parseInt(item1.css('height')) + 100+"px"); // $('#media-slider').delay(200).css('height', item1.css('height')); // $('#loop').delay(200).css('height', item1.css('height')); // vCenter(); // break; // case 1: // $('#media').delay(200).css('height', parseInt(item2.css('height')) + 100+"px"); // $('#media-slider').delay(200).css('height', item2.css('height')); // $('#loop').delay(200).css('height', item2.css('height')); // vCenter(); // break; // case 2: // $('#media').delay(200).css('height', parseInt(item3.css('height')) + 100+"px"); // $('#media-slider').delay(200).css('height', item3.css('height')); // $('#loop').delay(200).css('height', item3.css('height')); // vCenter(); // break; // case 3: // $('#media').delay(200).css('height', parseInt(item4.css('height')) + 100+"px"); // $('#media-slider').delay(200).css('height', item4.css('height')); // $('#loop').delay(200).css('height', item4.css('height')); // vCenter(); // break; // }; };
//________________________________________
//
// :$f4: Loop Modifier :$f4:
//
// --------------------------------------------------------------------------------------------
// ::loopRight & loopLeft functions modify the loop position by adding or taking away from the left property
// ::1-parse's target property into a number & stores into temp variable
// ::2-modifies temp variable & attaches px string
// ::3-checks modified temp variable against loop's restrictions
// ::4-re-assigns final variable to target
// ::5-calls Resize function with itemCount value
// ::6-updates checked input element
// :Resize: function is called here for simplicity in the click event function
// :loopRight: function add's to the loop's left property | if it is higher than the limit it will set it to that limit
// :loopLeft: function subtracts from the loop's left property | if it is lower than the limit it will set it to that limit
// -------------------------------------------------------------------------------------------- function loopUpdate ( condition ) { var loopPos = parseInt(loop.css('left')); switch (condition.toLowerCase) { case 'left': loopPos = loopPos + 525; break; case 'right': loopPos = loopPos - 525; break; }; if (loopPos < -1575) { loopPos = -1575; } else if (loopPos >= 100) { loopPos = 0; } else { }; loop.css('left', loopPos+'px'); console.log(loopPos); Resize(); };
//________________________________________
// :$a3: AUTOMATED INTERVAL | RESET HEADER COLOR :$a3:
//
// ------------------------------------------------------
// ::resets title background color to default every 5 seconds
// ------------------------------------------------------ function headerChange() { var interval = setInterval(function() { $('.section-title').css('background-color', 'rgba(0,0,0,0.6)'); }, 5000); };
//_______________________//
// :: Calls function :: // headerChange();
//____________________________________________
// :: JQUERY CLICK EVENTS :: //
// :: Left & Right :: //
//
// -----------------------------------------------------------
// ::1-left arrow click calls
// ::itemCounter update function::
// ::loopRight function::
// ::activates input radio corresponding with itemCount index::
// ----------------------------------------------------------- $('#left').click(function() { updateCounters("left"); loopUpdate( "left" ); input.eq(itemCount).click(); }).mousedown(function() { $(this).toggleClass('button-bg'); }).mouseup(function() { $(this).toggleClass('button-bg'); }); $('#right').click(function() { updateCounters("right"); loopUpdate( "Right" ); input.eq(itemCount).click(); }).mousedown(function() { $(this).toggleClass('button-bg') }).mouseup(function() { $(this).toggleClass('button-bg'); });
//____________________________________________
// :: JQUERY KEY EVENTS :: //
// :: Left & Right :: //
//
// -----------------------------------------------------------
// :CALLS: itemCounter | loopRight or loopLeft | update input
// ----------------------------------------------------------- $(document).keyup(function(k) { if (k.keyCode == 37) { updateCounters("left"); loopUpdate("right"); input.eq(itemCount).click(); } else if (k.keyCode == 39) { updateCounters("right"); loopUpdate("left"); input.eq(itemCount).click(); } else {}; });
//____________________________________________
// :$f: INPUT RADIO'S FUNCTION :$f: //
//
// -----------------------------------------------------------
// ::check which input index was clicked on
// ::match clicked input index to index of items array
// ::set loop's left property to media-slider width multiplied by matched items index number
// ----------------------------------------------------------- function inputCall( call ) { var inputIndex = call.index(); var loopCall = mediaWindow.width()*inputIndex; Resize(inputIndex); loop.css('left', -loopCall+"px"); }; $('input').click(function() { $('.section-title').css('background-color', items[$(this).index()].css('background-color')); inputCall($(this)); });
});
Media Slider - Script Codes
Media Slider - Script Codes
Home Page Home
Developer Michael Goldspinner
Username emgo
Uploaded July 07, 2022
Rating 3
Size 6,880 Kb
Views 56,672
Do you need developer help for Media 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 Goldspinner (emgo) Script Codes
Name
Single Page Layout Concept
CSS UI Set
IFrame Modal
W3Schools Forms Example
Bible Reader Concept
Scrolling Sidebar
Resolving div Overflow
WebOS style navigation WIP
Fundamental Flex-Box Menu
Post List Item
Create amazing sales emails 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!