Slide big html object

[ Moderator note: don’t put ` [question]` in the topic titles. They’re all questions already. ]

Dear WordPress developers,

My name is Gerwin and i am trying to make my custom build case system in my WordPress website in an slider. This is an screen of the elements i would like to slide: https://prnt.sc/ehmztw is there any way of doing this? i am an absolute beginner in javascript and php so i don’t have clue on how to do this.

The code of the elements i want to slide is:

	<div class="content grey portfolio">
		<div class="grid-slider">
<?php if(get_field('case-items', 'option')): ?>
	    <?php while(has_sub_field('case-items', 'option')): ?>
	    <center><h2><?php the_sub_field('case-heading');?></h2></center>
<div class="choice-case-con">
    <ul>
        <li>SEO</li>  
        <li>SEA</li>    
        <li>Retargeting</li>    
        <li>Webdesign</li>    
    </ul>
</div>
<!-- browser !-->
<div class="left-cases">
	<div class="browser">
	<!-- browser search top !-->
		<div class="browser-balk">
			<div class="browser-balk-top">
				<div class="dots-holder">
					<div class="dot red"></div>
					<div class="dot yellow"></div>
					<div class="dot green"></div>
				</div>
				<div class="website-title">
				<p><?php the_sub_field('website-naam');?></p>
				</div>
			</div>
			<div class="browser-balk-bottom">
			<!-- previous and next button !-->
				<div class="next-previous">
					<div class="previous">
						<i class="fa fa-caret-left" aria-hidden="true"></i>
					</div>
					<div class="next">
						<i class="fa fa-caret-right" aria-hidden="true"></i>
					</div>		
				</div>
			<!-- previous and next button !-->
				<div class="input-balk">
					<input type="text" name="url" placeholder="<?php the_sub_field('website-naam');?>">
				</div>
				<div class="dot-search">
				</div>
				<div class="input-balk-search">
					<input type="text" name="url">
				</div>
			</div>
			<!-- browser search top end!-->
			<div class="image-load">
				<img src="<?php the_sub_field('website-image');?>">
			</div>
		</div>
	</div>
	<div class="review">
		<div class="rate">	
			<h2><?php the_sub_field('case-review');?></h2>
			<div class="stars">
				<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>
				<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>
				<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>
				<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>
				<div class="star"><i class="fa fa-star" aria-hidden="true"></i></div>
			</div>
		</div>
	</div>
	<article>
	<i><?php the_sub_field('case-review-tekst');?></i>
	</article>
	<div class="author">
	- <?php the_sub_field('case-auhor');?>
	</div>
</div>
<!-- browser !-->
<div class="info-area">
	<div class="into">
	<subhead>
		<h2><?php the_sub_field('website-naam');?></h2>
		<h4><?php the_sub_field('featured-snippet-subhead');?></h4>
	</subhead>
	</div>
	<div class="featured-snippet">
	<p>
	<img src="<?php the_sub_field('featured-snippet-logo');?>" align="right" width="160px" style="margin:10px;">
    <?php the_sub_field('featured_snippet');?>
	</p>
	<h4><?php the_sub_field('featured-snippet-seotitle');?></h4>
	<h5><a href="#" rel="nofollow"><?php the_sub_field('full-website-link');?></a></h5>
	</div>
		<div class="button-border" style="float:left; margin-top:10px;">
			<button class="ver-con">Bekijk meer projecten</button>
		</div>
</div>
</div>
		</div><!--.grey portofolio-->

I tried some others plugins but i don’t think it works that way. I hope someone can help me. Next week i need to get this done for my school exams.

Thanks for reading this, i would love an awesome reaction and solution on this!

Greetings,
Gerwin

• This topic was modified 8 years ago by gerwinmorren.
• This topic was modified 8 years ago by Jan Dembowski.