Home MasterSlider CSS overwritten?
Reply: 0

MasterSlider CSS overwritten?

user2473
1#
user2473 Published in May 24, 2018, 11:17 pm

I'm using MasterSlider on my Wordpress to display the images. The image suppose to look like this when each button is clicked. Which means the first slider will be replaced by the second slider. But every time when "But2" is clicked, the second slider size got smaller. This is the comparison for both sliders.

I realised that whenever an inline style is added, the second slider image will shrink. Is there any CSS possibly overwritten the masterslider image size, causing it to be like this?

Here is my code:

function but1Function() {
  var x = document.getElementById("pic1");
  x.style.opacity = "1";
  var y = document.getElementById("pic2");
  y.style.opacity = "0";
  document.getElementById("item_desc").innerHTML = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>";
}

function but2Function() {
  var a = document.getElementById("pic1");
  a.style.opacity = "0";
  var b = document.getElementById("pic2");
  b.style.opacity = "1";
  document.getElementById("item_desc").innerHTML = "<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>";
}
#pic2 {
  position: absolute;
  top: 0px;
  opacity: 0;
}
<div class="row">
  <div class="col-lg-4 col-sm-4">
    <div id="item_button">
      <button id="but1" onclick="but1Function()">But 1</button>
      <button id="but2" onclick="but2Function()">But 2</button></div>
  </div>
  <div class="col-lg-4 col-sm-4">
    <div id="item_slider">
      <div id="pic1">[masterslider id="47"]</div>
      <div id="pic2">[masterslider id="48"]</div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-4">
    <div id="item_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
  </div>
</div>

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.300276 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO