Sliding Images Panels Template with jQuery




slider juqery

This is A simple portfolio template, with project preview images that slide out to reveal the selected project.

This time, we’ve been playing around with the idea of moving blocks of content as a way to transition from the main/gallery page to the project page. All panels move along the y-axis (x-axis on smaller devices), and the movement is triggered by whether the user wants to learn more about a project, or wants to access the navigation.

Creating the structure

The HTML structure is composed of two unordered lists, the ul.cd-projects-previewsfor the project preview images and the ul.cd-projects for the project details, and anav.cd-primary-nav wrapping the main navigation.

<div class=”cd-projects-container”>
<ul class=”cd-projects-previews”>
<li>
<a href=”#0″>
<div class=”cd-project-title”>
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</a>
</li>

<li>
<!– project preview here –>
</li>

<!– other project previews here –>
</ul> <!– .cd-projects-previews –>

<ul class=”cd-projects”>
<li>
<div class=”preview-image”>
<div class=”cd-project-title”>
<h2>Project 1</h2>
<p>Brief description of the project here</p>
</div>
</div>

<div class=”cd-project-info”>
<!– project description here –>
</div> <!– .cd-project-info –>
</li>

<!– projects here –>
</ul> <!– .cd-projects –>

<button class=”scroll cd-text-replace”>Scroll</button>
</div> <!– .cd-project-container –>

<nav class=”cd-primary-nav” id=”primary-nav”>
<ul>
<li class=”cd-label”>Navigation</li>
<li><a href=”#0″>The team</a></li>
<!– navigation items here –>
</ul>
</nav>


Leave a Reply

Your email address will not be published. Required fields are marked *