I have a content type with field_slides and I want to use it on multiple region in the same page. its a slide show using light gallery, at mobile view I want to hide the first div and show it on the second one.
<body>
<div class="first-div"> {{content.slides}} </div>
<div class="second-div">{{content.slides}} </div>
</body>
The issue is the slides works fine on the first div but if i try to open it on the second div it keeps scrolling to the top ( first div )/reloading the page sometimes. However if I removed the region from the first div it works fine on the second div, I want to have it working on both the divs. Is this possible ?? please help
I also tried this
<script type="text/javascript">
jQuery(document).ready(function() {
if (($(window).width() < 701 )) {
$(".first-div").empty();
$(".second-div").append( "{{content.slides}}" );
}
else {
$(".first-div").append( "{{content.slides}}" );
$(".second-div").empty();
}
});
</script>
Its not working either ---
Here is the actual twig template
{% set slider2 = content.content_2_project %}
<body>
<div id="fullpage">
<div class="section">
<div class="portfolio-section1">
<div class="port-top">
{{content.content_1_project}}
{{content.content_1_punch}}
</div>
</div>
</div>
<div class="section">
<div class="portfolio-section2">
<div class="port-left">
<div class="port-left-inner">
{{content.content_2_body}}
{{content.content_2_body_details}}
</div>
</div>
<div class="port-right">
<div class="port-right-slide-container">
{{content.content_2_project}}
</div>
</div>
</div>
</div>
<div class="section mobile-section">
<div class="port-mob-slide-container">
{{ slider2 }}
</div>
</div>
</div>
</body>
i'm using Fullpage.js on the drupal 8 site.