moses toh
Reputation: 13192
How can I make image slider responsive on every device?
My html code like this :
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="slider.css">
<title>Home</title>
</head>
<body class="header-static ">
<div class="page-container">
<div id="nav-white-left">
<div class="navbar blue-txt">
<nav class="nav-extended navbar-white z-depth-0">
<div class="nav-wrapper" style="color:black;text-align: center;">
Header
</div>
</nav>
</div>
</div>
<section class="sec-homepage" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="color-overlay-section" data-direction="bottom"
data-hex1="000000"
data-hex2="000000"
data-opacity1="0.6"
data-opacity2="0.6">
<div class="white-text center">
<div class="swiper-container swiper-homepage">
<div class="swiper-wrapper ">
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style=background-image:url('https://img.techpowerup.org/200129/slider1.png');">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style=background-image:url('https://img.techpowerup.org/200129/slider1.png');>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style=background-image:url('https://img.techpowerup.org/200129/slider2.png');">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style=background-image:url('https://img.techpowerup.org/200129/slider2.png');>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blue-3-colomn" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="" data-direction="bottom"
data-hex1=""
data-hex2=""
data-opacity1="0.6"
data-opacity2="0.6">
<div class="container-cstm blue-txt">
<div class="row bottom-0" style="text-align: center;">
Content
</div>
</div>
</div>
</div>
</section>
<footer class="page-footer white">
<div class="footer-copyright border-top-grey white">
<div class="container grey-text text-darken-1 center">
<div class="container grey-text text-darken-1 center">
Footer
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Demo and full code like this :
https://codepen.io/positivethinking639/pen/WNbBjGX
I check on the mobile version(android and iphone) and tablet too, it's not responsive
How can I make it to be responsive on all device?
Upvotes: 0
Views: 170
Answers (2)
chans
Reputation: 5260
There are many double-quotes missing in the above code styles attribute
Added fixes to those
Added additional css to the image tag
Here is the working codepen: https://codepen.io/chansv/full/gObJEPv
Find the working code here
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="slider.css">
<title>Home</title>
</head>
<body class="header-static ">
<div class="page-container">
<div id="nav-white-left">
<div class="navbar blue-txt">
<nav class="nav-extended navbar-white z-depth-0">
<div class="nav-wrapper" style="color:black;text-align: center;">
Header
</div>
</nav>
</div>
</div>
<section class="sec-homepage" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="color-overlay-section" data-direction="bottom"
data-hex1="000000"
data-hex2="000000"
data-opacity1="0.6"
data-opacity2="0.6">
<div class="white-text center">
<div class="swiper-container swiper-homepage">
<div class="swiper-wrapper ">
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style="background-image:url('https://img.techpowerup.org/200129/slider1.png'); background-size: 100% 100%;">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style="background-image:url('https://img.techpowerup.org/200129/slider1.png'); background-size: 100% 100%;">
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"></h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="hide-on-med-and-down swiper-slide-bg " style="background-image:url('https://img.techpowerup.org/200129/slider2.png'); background-size: 100% 100%;">
<div class="color-overlay-header" style="height:100%;" data-direction="bottom" data-hex1="#000000" data-hex2="#000000" data-opacity1="0.5" data-opacity2="0.3"></div>
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
<div class="swiper-slide-bg hide-on-large-only " style="background-image:url('https://img.techpowerup.org/200129/slider2.png'); background-size: 100% 100%;">
<div class="header-content">
<div class="center-ct">
<h3 class="title"></h3>
<h5 class="subtitle bottom-25"> </h5>
<a class="btn btn-white waves-effect waves-dark " href="#">Detail</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="blue-3-colomn" style="background-color:#FFFFFF">
<div class="image-background" style="background-image: url('');">
<div class="" data-direction="bottom"
data-hex1=""
data-hex2=""
data-opacity1="0.6"
data-opacity2="0.6">
<div class="container-cstm blue-txt">
<div class="row bottom-0" style="text-align: center;">
Content
</div>
</div>
</div>
</div>
</section>
<footer class="page-footer white">
<div class="footer-copyright border-top-grey white">
<div class="container grey-text text-darken-1 center">
<div class="container grey-text text-darken-1 center">
Footer
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Upvotes: 1
Michael Nelles
Reputation: 6032
So for your Javascript you could do something like this:
function sizeSlider(){
var w = window.innerWidth;
document.getElementById('mySlider').style.width = w
}
window.addEventListener("resize", sizeSlider); // set size on load
document.addEventListener('DOMContentLoaded', sizeSlider}); // set size on resize
And lest suppose your slider is named mySlider
<div id="mySlider">...</div>
Upvotes: 0
Related Questions
- making an image slider responsive
- How to make an adaptive image slider?
- make image slider full-width responsive
- How to make Slider Responsive in Html and Css
- creating a responsive html/css only image slider
- How to make a image slider responsive?
- Make slider responsive using media query
- Extra wide image slider on responsive site
- responsive images and different pic resolutions
- Responsive image slider particular case