I am trying to activate the slick slider animation for this page and it does not seem to be working. The slider class does not fold into a slider. I also want the code to auto play on load but it is doing none of them.
Here is the Current code:-
window.onload=function(){
$('.slider').slick({
autoplay:true,
autoplaySpeed:1500,
arrows:true,
prevArrow:'<button type="button" class="slick-prev"></button>',
nextArrow:'<button type="button" class="slick-next"></button>',
centerMode:true,
slidesToShow:4,
slidesToScroll:4
});
};
html, body{
background: #102131;
}
.slider{
width:400px;
margin:20px auto;
text-align: center;
padding:20px;
color:white;
.parent-slide{padding:15px;}
img{display: block;margin:auto;}
}
<div class="slider">
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 1</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 2</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 3</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 4</h1>
</div>
<div class="slide">
<img src="http://fillmurray.com/300/300" alt="" class="img-responsive" />
<h1>slide 5</h1>
</div>
</div>
Related
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="javascript1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style1.css" />
</head>
<body>
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
</body>
</html>
javascript1.js
document.getElementByclassName("menu ul li").style.padding = "1.5vh 50px
1.5vh 50px";
CSS
.menu{
width:100%;
opacity:70%;
}
.menu ul{
width:100%;
display:inline;
}
.menu ul li{
font-size: x-large;
float: left;
list-style: none;
text-decoration: none;
color:yellow;
background-color:green;
padding:1.5vh 86px;
}
I have done the coding so when the page opens it should show menu shrunk from 86px to 50px, but it is showing 86px right and left padding. The Javascript code is not reflecting. My goal is to obtain a screen width constant and then changing the padding according to it using Javascript. But first as I'm new to Javascript I just wanted to test if my Javascript code is working or not and it's not reflecting.
This will not work, because you are mixing class name and tag name.
Please, use document.querySelector or document.querySelectorAll if you need to update all findings.
document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px")
UPDATE Here is a working demo for the provided markup. Everything works perfectly. The issue is here: <script type="text/javascript" src="javascript1.js"></script> You loads your JS before DOM. So when JS starts working, it can't find the expected DOM elements cause they are not yet loaded. To fix the issue, move JS to the bottom of the file.
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px");
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
Visit https://www.w3schools.com/jsref/met_document_queryselector.asp.
Try with "document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";"
I've used slick slider before, but now I don't what causes this ruckus.
Am I missing something? I've followed the instruction at slick slider and also at github, I'm puzzled.
//JS here
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
/* Style here */
.container{
max-width:1200px;
margin:0 auto;
}
<!-- Script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- Html -->
<div class="container">
<div class="slider">
<div class="slides">
<img src="Picture4" alt="">
</div>
<div class="slides">
<img src="Picture3" alt="">
</div>
<div class="slides">
<img src="Picture2" alt="">
</div>
<div class="slides">
<img src="Picture1" alt="">
</div>
</div>
</div>
After analyzing your code, I noticed that the slick css import was missing.
https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css
I leave your example below with the CSS import.
$('.slider').slick({
arrows:true,
autoplaySpeed:1000
});
.container{
max-width:1200px;
margin:0 auto;
}
.slider{
display:flex;
.slides{
display:flex;
justify-content:center;
}
}
<!-- this line is missing -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="container">
<div class="slider">
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
<div class="slides">
<img src="http://via.placeholder.com/500x500" alt="">
</div>
</div>
</div>
Hi so I have a few pictures on a website that im creating (Please not im learning as I go along). I would like users to be able to click the image and view a full a pop up of the image, so like the original size of the actual image, I have added the code for the pictures below.
<section id="main">
<div class="inner">
<section>
<div class="box alt">
<div class="row 50% uniform">
<div class="4u"><span class="image fit"><img
src="images/marble/1.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/2.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
<div class="4u"><span class="image fit"><img
src="images/marble/3.jpg" width="321" height="230" alt="" /><h3>Marble</h3>
</span></div>
</div>
</div>
</section>
</div>
</section>
Hover:
.image.fit >img:hover {
width: 1000px;
height: 1000px;
position: absolute;
}
The span elements should be completely removed and its classes placed on the image elements themselves.
Also, you have a nested section element that isn't doing anything for you.
Lastly, do not use HTML heading elements (<h1>...<h6>) because of the way they style the text. Formatting is the job of CSS. Instead of headings, it is more appropriate to surround each image and its accompanying text with figure and figcaption elements.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:hover {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail">
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I've taken Scott Marcus' answer and adapted to click, which was your original request.
The main diffence is the addition of a tags targeting elements on the page and using :target in the css.
img {
width:200px;
border:1px solid black; /* This is only added for testing purposes*/
}
.thumbnail:target {
width: 500px;
height:auto;
position:relative;
/* push image to the right by 1/2 the screen width and 1/2 the image width */
margin-left:calc(50% - 250px);
}
<section id="main">
<div class="inner">
<div class="box alt">
<div class="row 50% uniform">
<div class="4u">
<figure>
<a href="#image1">
<img src="https://pbs.twimg.com/profile_images/562466745340817408/_nIu8KHX.jpeg" alt="" class="thumbnail" id="image1">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image2">
<img src="http://www.critterbabies.com/wp-content/gallery/kittens/cats-animals-kittens-background-us.jpg" alt="" class="thumbnail" id="image2">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
<div class="4u">
<figure>
<a href="#image3">
<img src="http://www.warrenphotographic.co.uk/photography/bigs/08482-Fluffy-ginger-female-kitten.jpg" alt="" class="thumbnail" id="image3">
</a>
<figcaption>Marble</figcaption>
</figure>
</div>
</div>
</div>
</div>
</section>
I have 3 images i want to display them inline style with text under them but without using bootstrap grid-system because i want them to be close to each other and centered, i tried doing it but once i add the text they get displayed under each other, how can i fix that? here is my code:
.box{
display:inline;
}
<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
You can also use flex on the parent and it will put them side-by-side.
.boxes{
display:flex;
justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center boxes">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
You were close, but it should be display: inline-block. See code snippet:
.box{
display:inline-block;
}
<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>
Note: I see you've added the text-center class which is not working here on Stack Overflow, but should do the trick in your own code.
CSS Flexbox to the rescue (along with proper HTML semantics and no inline CSS styles)!
.container { display:flex; justify-content:center; }
.container figure { text-align:center; margin:0; }
.container img { height:120px; }
<div class="text-center container">
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
<figure>
<img src="http://placehold.it/50x50">
<figcaption>Test</figcaption>
</figure>
</div>
I have a div in the middle of html page.
It has 4 links that have images inside and some text.
What I need is this : when a user clicks on one of those links, it completely changes the div ( without reloading the page ), which will have an image, another text and a link. Those 4 links need to stay there, so that user can click on another one and get the same change again.
I couldn't write or find any code that helps me beyond replacing or toggling functions, which are good for 2 elements only.
Here's my HTML markup:
<div class="container-fluid fullspan offers_content" id="offers_content">
<div class="row offers">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offers_text col-md-7">
<p> text </p>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_1">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer1.png" alt="" class="img-responsive offer_image" />
<p>text-111</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_2">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button"/>
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button"/>
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button"/>
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button"/>
</div>
<div class="offer_text_ad">
<img src="images/offer2.png" alt="" class="img-responsive offer_image" />
<p>text-222</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_3">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer3.png" alt="" class="img-responsive offer_image" />
<p>text-333</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
<div class="container-fluid fullspan offers_content" id="offer_4">
<div class="row">
<div class="text-center">
<div class="pull-right hidden-xs">
<img src="images/pic1.jpg" alt="" class="offer_button" id="offer_pro_button" />
<img src="images/pic2.jpg" alt="" class="offer_button" id="offer_basic_button" />
<img src="images/pic3.jpg" alt="" class="offer_button" id="offer_qsplus_button" />
<img src="images/pic4.jpg" alt="" class="offer_button" id="offer_qs_button" />
</div>
<div class="offer_text_ad">
<img src="images/offer4.png" alt="" class="img-responsive offer_image" />
<p>text-444</p>
read more
</div>
</div>
</div>
</div><!-- /.container-fluid CONTENT-->
My relevant CSS:
.offers_content{
min-height:450px;
background-color:#fff;
}
#offer_quickstart,#offer_quickstartplus, #offer_basic, #offer_pro{
display:none;
}
#offers_content{
display:block;
}
.offer_image{
margin: 5% auto auto auto;
}
.offer_text_ad>p{
color:#000;
}
Thanks in advance.
Use Javascript and do something along the lines of:
function swapDivs(div1, div2) { // where div 1 will disappear and div 2 will take its place
document.getElementById(div1).className('hidden');
document.getElementById(div2).className('shown');
}
and then CSS like
.hidden {
top: -500px; // forces div above the screen
}
.shown {
// CSS code for the div you want shown
}
And in the HTML with the link it could be
<a onclick="javascript:swap('rowOffers','row');"><img src="images/pic4.jpg" alt="button_quickstart_offer" class="offer_button" id="offer_qs_button"/></a>
Just use "swap('div you want hidden', 'div you want shown')" as you need to.
So the end result will make the first div disappear and the second reappear in its place. So initially code the div you want shown from the beginning set its class to "shown" and then all the other divs as "hidden".
Hopefully this has been helpful and answers your question. If not, feel free to ask anymore about it :)