MasterSlider CSS overwritten?

  • Resolved dteo

    (@dteo)


    6 years, 6 months ago

    I’m using MasterSlider on my WordPress to display the images. The image supposes 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 a style is added to the second slider, the image will shrink. Is there any CSS possibly overwritten the masterslider image size, causing it to be like this?

    Here is my code:

    Javascript

    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>";
}

    CSS

    #pic2 {
  position: absolute;
  top: 0px;
  opacity: 0;
}

    HTML

    <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>

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor averta support

    (@averta_support)

    Hi,

    Thank you for choosing Master Slider.

    The second slider has no size and it is hide. Also, when it is not hide, the image sizes are incorrect. It will be fixed if you resize the images. Please add the below code to Slider Callbacks -> On slider init

    jQuery('#but2').click(function(){
  masterslider_instances[0].api.update(true);
  masterslider_instances[1].api.update(true);
});

    With this sample code, you can click on button2 and update slider and thumbnails. You can make this code better, or add the button1 to selector, too.

    If you need any further information, please let me know.

    Best,

    Thread Starter dteo

    (@dteo)

    Hi,

    I have tried this method. I pasted it into the second slider’s slider init, and I have set my slider setting as same as the first slider (500px width and height), but it’s still the same.

    Is there any setting I have done wrong, causing the second slider to show differently?

    Plugin Contributor averta support

    (@averta_support)

    Hi again,

    Please check out all of the slides’ options and make sure they are all the same.
    Also, check out the admin preview. Is there a difference between the slides on loading process?

    Let me know the result.

    Best,

    Thread Starter dteo

    (@dteo)

    Hi,

    It has been few weeks and I finally got it to work! It seems like the issue between server side and client side.

    I put both of my slider with this code with their coresponding button id

    jQuery('button id').click(function(){
  masterslider_instances[0].api.update(true);
  masterslider_instances[1].api.update(true);
});

    And changed my code from opacity : 0/1 to display: none/block , and the image work.

    But the part that isn’t working is the thumbnail. It works exactly like the product image from above. Link But I solve it easily with CSS and it my issue is kinda solved.

    Thank you very much for the help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘MasterSlider CSS overwritten?’ is closed to new replies.