Content Slider Pure CSS

Content Slider Pure CSS - javascript

I have code below for a content slider using HTML, CSS and JQuery. Is it possible to get exactly what I have now but using pure CSS only? If its not possible with pure CSS is it possible to do with Vanilla JavaScript with no JQuery? Anything helps, cheers.
$(function(){
var scroller = $('#scroller div.innerScrollArea');
var scrollerContent = scroller.children('ul');
scrollerContent.children().clone().appendTo(scrollerContent);
var curX = 0;
scrollerContent.children().each(function(){
var $this = $(this);
$this.css('left', curX);
curX += $this.outerWidth(true);
});
var fullW = curX / 2;
var viewportW = scroller.width();
// Scrolling speed management
var controller = {curSpeed:0, fullSpeed:2};
var $controller = $(controller);
var tweenToNewSpeed = function(newSpeed, duration)
{
if (duration === undefined)
duration = 600;
$controller.stop(true).animate({curSpeed:newSpeed}, duration);
};
// Pause on hover
scroller.hover(function(){
tweenToNewSpeed(0);
}, function(){
tweenToNewSpeed(controller.fullSpeed);
});
// Scrolling management; start the automatical scrolling
var doScroll = function()
{
var curX = scroller.scrollLeft();
var newX = curX + controller.curSpeed;
if (newX > fullW*2 - viewportW)
newX -= fullW;
scroller.scrollLeft(newX);
};
setInterval(doScroll, 40);
tweenToNewSpeed(controller.fullSpeed);
});
#scroller {
position: absolute;
}
#scroller .innerScrollArea {
overflow: hidden;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#scroller ul {
padding: 0;
position: relative;
}
#scroller li {
padding: 0;
list-style-type: none;
position: absolute;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
.everything {
/*transform: scale(0.6);
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;"/>
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>

You may use animation , but to keep the whole thing sliding for ever, you will need to clone (or make a redundant copy in HTML) at least of the elements that you see at first in the slider . Else, it would behave as a marquee , living a blank space untill everything slides off the box.
Example below:
/* all position:absolute removed */
#scroller {
overflow:hidden;
}
#scroller .innerScrollArea {
}
#scroller ul {
padding: 0;
position: relative;
display:flex;/* UPDATE */
}
#scroller li {
padding: 0;
list-style-type: none;
}
.circle {
width: 250px;
height: 250px;
position: relative;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: 50%;
background-color:transparent;
border-style:solid;
border-width:9px;
border-color:#006850;
}
.circle-text {
color: #1f497d;
font-family:Verdana;
font-size: 20.5px;
text-align: center;
width: 200px;
top: 90px;
left: 10%;
bottom: 0;
position: absolute;
z-index: 99;
}
.arrow {
width:300px;
height:80px;
}
.flipimage {
width:300px;
height:80px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
}
/* UPDATE for animation */
ul {
animation: slidli 9s infinite linear;
}
ul:hover {
animation-play-state:paused;
}
#keyframes slidli {
100% {
transform:translatex(-133.5%);/* this is to be update to the content with to see every element slide once untill copies/clone comes back at same spot */
}
}
<div class="everything">
<div id="scroller" style="width: 900px; height: 470px; margin: 0 auto;">
<div class="innerScrollArea">
<ul>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
<!-- from here it is a copy of the previous elements . 3 of them might have been enough -->
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
HR Connect<br/>Service<br/>Representative
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Specialist
</div>
</div>
</li>
<li>
<br style="line-height:89px;" />
<div class="circle">
<div class="circle-text">
Employee<br/>Relations<br/>Manager
</div>
</div>
<img class="flipimage" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
</li>
<li>
<img class="arrow" src="http://res.cloudinary.com/djxai1v1e/image/upload/v1499182382/testarrow_png6fn.png">
<div class="circle">
<div class="circle-text">
Director, Employee<br/>Relations &<br/>Well-Being
</div>
</div>
</li>
</ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</div>
Notice: I used the flex model and droppped the absolute positionning. Main parent can be in absolute if you do need it, children do not.

Related

Use same javascript function for different overlay IDs

I want to display the overlay for different links. 1st overlay has an image and text whereas if we click link2 it must display overlay2 having same structure but diff content. Please help me get the desired output.
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
//font-size: 50px;
color: black;
// transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
}
<div id="overlay" onclick="off()">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on()"></a>
</div>
<div id="overlay1" onclick="on1()">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="on1()"></a>
</div>
</div>
</div>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
<a onclick="on(id)"style="font-size: 11pt;">Read More -></a>
1. List item

There are better ways to achieve this, however as per your requirement you may pass different ids &actions as params to same function like so
function on() {
document.getElementById("overlay").style.display = "block";
}
function on1() {
document.getElementById("overlay1").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
function toggle(id, value) {
document.getElementById(id).style.display = value;
}
.img {
transition: transform 5s ease-in-out;
transform: scale(1);
transform-origin: 0 0;
}
.img:hover {
transform: scale(1.25)
}
#overlay,
#overlay1 {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
z-index: 77777772;
cursor: pointer;
}
#text,
#text1 {
position: fixed;
top: 20%;
left: 5%;
font-size: 50px;
color: black;
transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
}
<div id="overlay" onclick="toggle('overlay', 'none')">
<div id="text">
<div style="width: 48%; float:left">
<h2>XXX</h2>
<h4>ZZZ</h4>
<p style="font-size:14px;">
Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/boydB3_6881-683x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay', 'block')"></a>
</div>
<div id="overlay1" onclick="toggle('overlay1', 'block')">
<div id="text1">
<div style="width: 48%; float:left">
<h2>AAA</h2>
<h4>MMM</h4>
<p style="font-size:14px;">Help bring forth the immense talent that resides amongst the valley’s citizens. </p>
</div>
<div style="width: 50%; float:right; margin-top:-220px;
">
<img class="img" style="height:100%" src="http://cdn.dpmag.com/2016/06/002boydB37683-703x1024.jpg">
</div>
</div>
<div style="padding:20px">
<h2></h2>
<a onclick="toggle('overlay1', 'block')"></a>
</div>
</div>
</div>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a>
<a onclick="toggle('overlay', 'block')" style="font-size: 11pt;">Read More -></a> 1. List item

fixing a mobile menu and logo as header for smaller screens

I have a side navigation menu for bigger screens in this file. I want to create a navigation bar for mobile phones and smaller screens below 1024px width. I have tried making the mobile navbar hidden for bigger screens and it just acts up. I need some here is a link to my page
I will want it to look like this
I got the inspiration of the page from link and they were able to make it responsive.
var slideIndex = 0;
var slides = document.getElementsByClassName("home-page-slides");
showSlides();
function showSlides() {
var slideLength = slides.length;
// Fade in the slide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.add("fadeIn");
}, 10);
//Fade out the SLide
setTimeout(function() {
if (slideIndex == slideLength) {
slideIndex = 0;
}
slides[slideIndex].classList.remove("fadeIn");
}, 3980);
slideIndex++;
setTimeout(showSlides, 4000);
}
/*----------------------------------------------------
#Navigation menu
-----------------------------------------------------*/
.logo {
padding: 8px;
margin: 20px 0;
}
.navbar {
height: 100%;
width: 300px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
}
.navbar a {
display: block;
text-decoration: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 13px;
padding: 9px;
}
ul {
padding-left: 0px;
margin-left: 0px;
}
ul li {
list-style: none;
padding-left: 0px;
margin-left: 0px;
}
.navbarFooter {
position: relative;
right: 0;
left: 0;
text-align: center;
}
.divider {
width: 16%;
text-align: center;
position: relative;
display: inline-block;
vertical-align: middle;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.navFContent {
position: relative;
margin-top: 50px;
}
/*----------------------------------------------------
#Home Page
-----------------------------------------------------*/
.slideshow-container,
.main {
width: calc(100%-300px);
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 40px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100vh;
min-height: 100vh;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page {
height: 100vh;
min-height: 100vh;
width: 100%;
}
.home-page-slides img {
height: 100vh;
min-height: 100vh;
width: 100%;
background-position: top;
}
<base href="https://happy-kepler-414939.netlify.app/" /> <!-- insert by SO editor -->
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght#0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
<link rel="stylesheet" href="css/responsive.css">
<div class="navbar whitebg" id="navbar">
<div id="banner" class="mobile-banner">
<div class="mobile-logo"></div>
<div id="mobile" class="mobile-menu">
<a onClick="openNav()">
<div class="open">
<div id="burger" class="burger">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</div>
</div>
</a>
</div>
</div>
<div class="main-nav">
<nav class="menu centertext fontlight">
<ul>
<img class="logo" src="logos/mainLogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
</nav>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
info#hillandboyd.com
</p>
<p>
New York, USA.
</p>
</div>
</div>
</div>
</div>
<!-- HOME PAGE CONTENT-->
<section id="home-page">
<div class="main">
<div class="home-page">
<div class="slideshow-container">
<div class="home-page-slides">
<img src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Luxury Events</h6>
<h2 class="blacktxt f18">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt f15 fontlight">Join us for a “No Question too Small, Large or Outrageous” Chat about All things Bridal! This is your chance to have two industry experts answer your queries on any topic that is keeping you up at night.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/restaurantbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Creating Impact</h6>
<h2 class="blacktxt f18"> STRATEGY AND SALES</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
<div class="home-page-slides">
<img src="Images/memorialbg1.jpg" style="width:100%"/>
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt f30">Lasting Memories</h6>
<h2 class="blacktxt f18">SERVING WITH LOVE</h2>
<p class="greytxt f15"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

To hide the navigation panel & make the site responsive in mobile view use media query in css
#media only screen and (max-width: 736px) { /* css property for phone */ }
To animate and view side navigation
https://www.w3schools.com/howto/howto_js_sidenav.asp

Several questions regarding, image resizing (viewport)

I am having some Issues with how my images are aligned on my website.
1. I would the images to have equal spacing from the left and the right, meaning centered because currently as you make the browser smaller the right side is a lot bigger than the left.
2. Also as I make the browser smaller the page realigns nice, but when I view it on a mobile device it is very different.
You can find my code at https://codepen.io/anon/pen/mpKvMx
$("#myinput").keyup(function() {
var val = $.trim(this.value);
if (val === "")
$('img').show();
else {
$('img').hide();
val = val.split(" ").join("\\ ");
console.log(val)
$("img[alt*=" + val + " i]").show();
}
});
$(".img").wrap('<div class="alt-wrap"/>');
$(".img").each(function() {
$(this).after('<p class="alt">' + $(this).attr('alt') + '</p>');
})
h1 {
color: red;
}
h2 {
color:red;
}
p {
font-family: Arial;
}
body {
background-color: grey;
}
div {
text-align: justify;
}
div img {
display: inline-block;
width: auto;
max-height: 200px;
height: auto;
}
input[type=text] {
width: 130px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
.alt-wrap {
display: block;
position: relative;
margin: 20px;
color: whitesmoke;
border: 1px solid mediumorchid;
}
.alt-wrap p.alt {
position: absolute;
opacity: 0; /* hide initially */
left: 0; right: 0; bottom: 0;
margin: 0;
padding: 15px;
font-size: 14px;
line-height: 22px;
background-color: rgba(0,0,0,0.8);
transition: all 300ms ease;
transition-delay: 300ms;
}
.alt-wrap:hover > p.alt {
opacity: 1;
transition-delay: 0s;
}
.imgContainer{
float:left;
}
img {
width: 200px !important;
}
body {
background: white !important;
}
.imgContainer {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
overflow: hidden;
width: 0;
height: 100%;
transition: .5s ease;
}
.imgContainer:hover .overlay {
width: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.dl {
margin-top: 400px;
}
<html>
<title>Title</title>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<h1 align=center>Heading</h1>
<h2 align=center>Sub-Heading</h2>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<input type="text" id="myinput" name="search" placeholder="Search.." style="border-radius: 4px;">
</head>
<br>
<br>
<body>
<div class="image123">
<div class="imgContainer">
<img src="https://i.warosu.org/data/biz/img/0063/87/1515861781137.png" alt="Bitcoin"><div class="overlay"><div class="text">Bitcoin</div></div>
</div>
<div class="imgContainer">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/ETHEREUM-YOUTUBE-PROFILE-PIC.png" alt="Ethereum"><div class="overlay"><div class="text">Ethereum</div></div>
</div>
<div class="imgContainer">
<img src="https://www.profitconfidential.com/wp-content/uploads/2018/11/ripple-icon-1-300x300.png" alt="Ripple"><div class="overlay"><div class="text">Ripple</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Bitcoin_Cash.png" alt="Bitcoin Cash"><div class="overlay"><div class="text">Bitcoin Cash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ada.png" alt="Cardano"><div class="overlay"><div class="text">Cardano</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/NEM.png" alt="NEM"> <div class="overlay"><div class="text">NEM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/Litecoin.png" alt="LiteCoin"><div class="overlay"><div class="text">LiteCoin</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/stellar.png" alt="Stellar Lumens"><div class="overlay"><div class="text">Stellar Lumens</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/iota.png" alt="IOTA"><div class="overlay"><div class="text">IOTA</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/dash.png" alt="Dash"><div class="overlay"><div class="text">Dash</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/neo.png" alt="NEO"><div class="overlay"><div class="text">NEO</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/tron.png" alt="Tron"><div class="overlay"><div class="text">Tron</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/monero.png" alt="Monero"><div class="overlay"><div class="text">Monero</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/eos.png" alt="EOS"><div class="overlay"><div class="text">EOS</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/icon.png" alt="ICON"><div class="overlay"><div class="text">ICON</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/bitcoingold.png" alt="Bitcoin Gold"><div class="overlay"><div class="text">Bitcoin Gold</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/qtum.svg" alt="QTUM"><div class="overlay"><div class="text">QTUM</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/ethereum_classic.png" alt="Ethereum Classic"><div class="overlay"><div class="text">Ethereum Classic</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/raiblocks.png" alt="RaiBlocks"><div class="overlay"><div class="text">RaiBlocks</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/lisk.png" alt="Lisk"><div class="overlay"><div class="text">Lisk</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/verge.png" alt="Verge"><div class="overlay"><div class="text">Verge</div></div>
</div>
<div class="imgContainer">
<img src="http://199.180.133.206/img/omisego.png" alt="OmiseGo"><div class="overlay"><div class="text">OmiseGO</div></div>
</div>
</div><br>
</body>
</html>

1) All you need is to add the following css to the element you want to align horizontally: margin: 0 auto;
2) Use media queries, so for example you can have:
on mobile: all the images stacked (you may need width:100% on your image container)
for wider viewports: images inlined as in your code sample
If you are not confortable with media queries please see the following example: https://codepen.io/TrentWalton/pen/kqxDy.

How to use several image sliders on the same page?

I created a simple image slider and I am trying to make it work regardless of how many are on the same page. I have tried many approaches, but none work correctly unless I call each slider separately:
HTML
<section id="rm-slider-1" class="rm-slider" data-name="rm-slider-1">
<a href="#" class="rm-slider-control rm-prev">
<span class="rm-slider-icon-container"><span><</span></span>
</a>
<a href="#" class="rm-slider-control rm-next">
<span class="rm-slider-icon-container"><span>></span></span>
</a>
<ul class="rm-slider-slides">
<li class="rm-slider-slide slide-1" style="background-image: url(http://www.planwallpaper.com/static/images/beautiful-sunset-images-196063.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide One</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 1</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-2" style="background-image: url(http://www.planwallpaper.com/static/images/434976-happy-valentines-day-timeline-cover.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Two</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 2</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-3" style="background-image: url(http://all4desktop.com/data_images/original/4237670-images.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Three</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 3</span>
</a>
</div>
</li>
</ul>
</section>
<section id="rm-slider-2" class="rm-slider" data-name="rm-slider-2">
<a href="#" class="rm-slider-control rm-prev">
<span class="rm-slider-icon-container"><span><</span></span>
</a>
<a href="#" class="rm-slider-control rm-next">
<span class="rm-slider-icon-container"><span>></span></span>
</a>
<ul class="rm-slider-slides">
<li class="rm-slider-slide slide-4" style="background-image: url(http://www.planwallpaper.com/static/images/download-happy-janmashtami-hd-images_q0dlDbz.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Four</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 4</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-5" style="background-image: url(http://www.planwallpaper.com/static/images/happy_diwali__sms_images_.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Five</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 5</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-6" style="background-image: url(http://www.planwallpaper.com/static/images/_77246627_fa4891a6-ccf8-4c8f-9e32-f1a80cdcdf4c_0ClWxBM.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Six</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 6</span>
</a>
</div>
</li>
</ul>
</section>
<section id="rm-slider-3" class="rm-slider" data-name="rm-slider-3">
<a href="#" class="rm-slider-control rm-prev">
<span class="rm-slider-icon-container"><span><</span></span>
</a>
<a href="#" class="rm-slider-control rm-next">
<span class="rm-slider-icon-container"><span>></span></span>
</a>
<ul class="rm-slider-slides">
<li class="rm-slider-slide slide-7" style="background-image: url(http://www.planwallpaper.com/static/images/Halloween-Wallpaper-37.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Seven</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 7</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-8" style="background-image: url(http://www.planwallpaper.com/static/images/11-sea-beach-sand-wallpaper_w80EYH0.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Eight</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 8</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-9" style="background-image: url(http://www.planwallpaper.com/static/images/1080p-wallpapers-new.png);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Nine</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 9</span>
</a>
</div>
</li>
<li class="rm-slider-slide slide-10" style="background-image: url(http://www.planwallpaper.com/static/images/fire_fist_vs_water_fist-wallpaper-1920x1080_gVipT2G.jpg);">
<div class="rm-copy-container">
<h1 class="rm-img-slider-title">Slide Ten</h1>
<a class="rm-img-slider-call-to-action" href="http://georgecodes.com/">
<span>Button 10</span>
</a>
</div>
</li>
</ul>
</section>
CSS
/* Placeholders */
/* ============ */
a.rm-slider-control {
height: 100%;
width: 100%;
display: block;
transition: all 0.5s; }
.rm-slider, .rm-slider-slide {
height: 100%;
width: 100%;
position: relative;
display: block;
margin: 0;
padding: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat; }
/* Image Slider Styles */
/* =================== */
html, body {
padding: 0;
margin: 0; }
/* Hero */
/* ==== */
.rm-slider {
overflow: hidden;
height: 100vh; }
.rm-slider ul {
position: relative;
width: 100%;
height: 100%;
padding: 0;
margin: 0; }
#media only screen and (min-width: 1024px) {
.rm-slider-copy {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
font-size: 64px;
text-align: left;
bottom: auto; } }
/* Image Slider */
/* ============ */
.rm-slider-slide {
float: left;
transition: opacity 0.5s linear;
z-index: 0;
opacity: 0;
position: absolute;
display: block; }
.rm-slider-slide .rm-copy-container {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: center;
color: white;
width: 100%; }
.rm-slider-slide.active {
z-index: 1;
opacity: 1; }
/* Slider Controls */
/* --------------- */
a.rm-slider-control {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 2;
background: rgba(42, 42, 42, 0.1);
cursor: pointer;
font-size: 36px;
height: 100px;
width: 30px; }
a.rm-slider-control .rm-slider-icon-container {
color: white;
height: 100%;
width: 100%; }
a.rm-slider-control .rm-slider-icon-container span {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
a.rm-slider-control.rm-next {
right: 0; }
a.rm-slider-control.rm-prev {
left: 0; }
a.rm-slider-control:hover {
background: rgba(42, 42, 42, 0.4); }
#media only screen and (min-width: 1280px) {
a.rm-slider-control {
height: 100px;
width: 50px; }
a.rm-slider-control .rm-slider-icon-container span {
font-size: 32px; } }
/* Slider Text */
/* ----------- */
.rm-img-slider-title {
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 16px 0;
line-height: 1; }
.rm-img-slider-call-to-action {
border: 2px solid white;
border-radius: 40px;
color: white;
margin: 16px auto 0;
display: table;
height: 40px;
position: relative;
margin: 0 auto; }
.rm-img-slider-call-to-action span {
display: table-cell;
vertical-align: middle;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 0 32px; }
.rm-img-slider-call-to-action:hover {
background: rgba(255, 255, 255, 0.4); }
#media only screen and (min-width: 768px) {
.rm-img-slider-title {
font-size: 56px; } }
/* Testing */
.rm-slider {
overflow: hidden;
height: 500px;
width: 33.33333333%;
float: left; }
/*# sourceMappingURL=style.css.map */
JS
var ramonSlider = function(slider, slides, prev, next, transition) {
var imgSlider = {
slider: $(slider).data('name'),
sliderId: $('#' + $(slider).data('name')),
slides: $(slides),
prev: $(prev),
next: $(next),
transition: transition || 3000,
currentIndex: 0,
interval: undefined,
slideCount: function() {
return this.sliderId.find(slides).length;
},
makeFirstSlideActive: function() {
this.sliderId.find(slides).first().addClass('active');
},
moveItems: function() {
var slideItems = this.sliderId.find(slides);
var currentSlide = slideItems.eq(this.currentIndex);
console.log(currentSlide);
slideItems.removeClass('active');
currentSlide.addClass('active');
},
moveOne: function() {
console.log(this.slideCount());
var thisObject = this;
if (this.currentIndex > this.slideCount() - 1) {
thisObject.currentIndex = 0;
}
this.moveItems();
},
autoSlide: function() {
var thisObject = this;
this.interval = window.setInterval(function() {
thisObject.currentIndex++;
thisObject.moveOne();
}, thisObject.transition);
},
moveToNext: function() {
var thisObject = this;
var nextItem = this.sliderId.find(next);
nextItem.on('click', function(e) {
e.preventDefault();
window.clearInterval(thisObject.interval);
thisObject.currentIndex++;
thisObject.moveOne();
});
},
moveToPrev: function() {
var thisObject = this;
var prevItem = this.sliderId.find(prev);
prevItem.on('click', function(e) {
e.preventDefault();
window.clearInterval(thisObject.interval);
thisObject.currentIndex--;
if (thisObject.currentIndex < 0) {
thisObject.currentIndex = thisObject.slideCount() - 1;
}
thisObject.moveItems();
});
}
}
var init = function() {
imgSlider.makeFirstSlideActive();
imgSlider.moveItems();
imgSlider.moveOne();
imgSlider.autoSlide();
imgSlider.moveToNext();
imgSlider.moveToPrev();
}
return init();
};
This Works (Calling each function with the ID of the slider)
$(document).ready(function() {
ramonSlider('#rm-slider-1', '.rm-slider-slide', '.rm-prev', '.rm-next');
ramonSlider('#rm-slider-2', '.rm-slider-slide', '.rm-prev', '.rm-next');
ramonSlider('#rm-slider-3', '.rm-slider-slide', '.rm-prev', '.rm-next');
});
I want this to work (calling a function once using a class instead of ids)
$(document).ready(function() {
ramonSlider('.rm-slider', '.rm-slider-slide', '.rm-prev', '.rm-next');
});
Any thoughts?

Untested, but should work:
$(document).ready(function() {
$('.rm-slider').each(function(){
ramonSlider(this, '.rm-slider-slide', '.rm-prev', '.rm-next');
});
});
Also, these three lines are actually wrong in your slider plugin:
...
slides: $(slides),
prev: $(prev),
next: $(next),
...
As it is now, they are selecting all elements with those classes in your document, when you probably only want to select the ones in the current slider. For that you probably want to replace them with
...
slides: $(slides, $(slider)),
prev: $(prev, $(slider)),
next: $(next, $(slider)),
...
If it works as it is now, it's probably because you don't actually use this.slides, this.prev or this.next. But... if you don't use them, I don't see any point in defining them as properties of your object. Most likely, your slider will be fine if you remove those lines altogether.

You can try looping it in $.each
$(document).ready(function() {
$('.rm-slider').each(function(){
ramonSlider(this, '.rm-slider-slide', '.rm-prev', '.rm-next');
});
});
Tested and verified

Element shouldn't be fading but is

Just like the title says, I have an element that shouldn't be fading but is. The element in question is text on top of an image that fades when you move your mouse over it.
HTML:
<div id="image-wrapper">
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210" />
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
jQuery
$(document).ready(function () {
$('.fade').mouseenter(function (ev) {
$(this).fadeTo(150, 0.5);
$(this).find('img').siblings().fadeIn(150);
}).mouseleave(function () {
$(this).fadeTo(150, 1);
$(this).find('img').siblings().fadeOut(150);
});
});
Fiddle: https://jsfiddle.net/oLckb6h3/4/

A suggestion:
HTML
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<div class="doFade"> </div>
<div class="info">
<h3 class="bio bio-header">Header</h3>
<p class="bio bio-footer">Information</p>
</div>
<img src="http://placehold.it/158x210"/>
</div>
</li>
</ul>
</div>
CSS
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
position: relative;
}
.doFade {
position: absolute;
left: 0;
background: #fff;
top: 0;
right: 0;
bottom: 0;
opacity: 0.5;
display: none;
}
.info {
position: absolute;
left: 0;
background: transparent;
top: 0;
right: 0;
bottom: 0;
display: none;
}
jQuery
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$('.doFade', this).add( $('.info', this) ).fadeIn(150);
}).mouseleave(function() {
$('.doFade', this).add( $('.info', this) ).fadeOut(150);
});
});
DEMO

Fade the img rather than the .fade element...
$(document).ready(function() {
$('.fade').mouseenter(function(ev) {
$(this).find('img').fadeTo(150, 0.5).siblings().fadeIn(150);
}).mouseleave(function() {
$(this).find('img').fadeTo(150, 1).siblings().fadeOut(150);
});
});
ul {
list-style-type:none;
}
.bio {
padding:15px;
}
.bio-header {
margin-top:-150px;
}
.tile {
width:158px;
height:210px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="image-wrapper" >
<ul id="team-members">
<li class="tile-wrapper fade">
<div class="tile">
<img src="http://placehold.it/158x210"/>
<h3 class="bio bio-header" style="display:none;">Header</h3>
<p class="bio bio-footer" style="display:none;">Information</p>
</div>
</li>
</ul>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

Content Slider Pure CSS - javascript

Related

Use same javascript function for different overlay IDs

fixing a mobile menu and logo as header for smaller screens

Several questions regarding, image resizing (viewport)

How to use several image sliders on the same page?

Element shouldn't be fading but is

Categories

Resources