- Messages
- 228
- Reaction score
- 13
- Points
- 38
gumamit po ako ng jsImgSlider and ang problema ko po e everytime na mag swiswitch ako sa mobile view hindi nag shrshrink yung image slider ko po which is naiiwan po sya sa original size nya na malaki, ginamitan ko naman po sya ng bootstrap pero wala pa din e sana may makatulong salamat po eto pala yung code ko sa html.
Code:
<!DOCTYPE html>
<html>
<head>
<link href="4/js-image-slider.css" rel="stylesheet" type="text/css" />
<link href="generic.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="4/bootstrap.css">
<link rel="stylesheet" type="text/css" href="4/bootstrap.min.css">
<!--JS-->
<script src="4/js-image-slider.js" type="text/javascript"></script>
<script src= "4/bootstrap.js" type="text/javascript"></script>
<script src= "4/bootstrap.min.js" type="text/javascript"></script>
<title>slider</title>
</head>
<body>
<div class="container">
<div id="sliderframe">
<div id="slider">
<img src="img/FP1.png" />
<img src="img/FP2.png" />
<img src="img/FP3.png" />
<img src="img/FP4.png" />
</div>
<!--Custom navigation buttons on both sides-->
<br / >
<div class="group1-Wrapper">
<a onclick="imageSlider.previous()" class="group1-Prev"></a>
<a onclick="imageSlider.next()" class="group1-Next"></a>
</div>
<!--nav bar-->
<div style="text-align:center;z-index:20;">
<a onclick="imageSlider.previous()" class="group2-Prev"></a>
<a id='auto' onclick="switchAutoAdvance()"></a>
<a onclick="imageSlider.next()" class="group2-Next"></a>
</div>
</div>
</div>
<script type="text/javascript">
//The following script is for the group 2 navigation buttons.
function switchAutoAdvance() {
imageSlider.switchAuto();
switchPlayPauseClass();
}
function switchPlayPauseClass() {
var auto = document.getElementById('auto');
var isAutoPlay = imageSlider.getAuto();
auto.className = isAutoPlay ? "group2-Pause" : "group2-Play";
auto.title = isAutoPlay ? "Pause" : "Play";
}
switchPlayPauseClass();
</script>
</body>
</html>
