I'm having some issue with HTML links not working locally however they do work on Codepen.
I have 3 pages; when I run them locally the links work on the first two but do not show on the 3rd. The 3rd-page links do show up in Codepen.
I have tried for over a week now trying to figure it out.
This is the Codepen:
https://codepen.io/Randy3/pen/oPvQoY?editors=1100
Here is the code itself
body {
background-color: ;
}
#Captain {
border-radius: 40%;
width: 150px;
height: 150px;
transform: rotate(90deg);
margin: 0px;
}
/* The navbar itself. */
nav ul {
float: right;
display: flex;
}
nav ul li {
list-style: none;
margin-right: 20px;
position: relative;
}
h1 {
text-align: center;
font-family: Comic Sans MS;
color: orange;
}
footer a {
margin-right: 30px;
position: relative;
float: right;
}
.figure-img {
display: grid;
height: 100%;
grid-template-columns: repeat( 3, 1fr);
grid-gap: 20px;
}
img {
display: block;
max-width: 240px;
max-height: 340px;
height: auto;
width: auto;
border: 30%;
}
<!DOCTYPE html>
<html>
<head>
<title>Gallery</title>
<link rel="stylesheet" type="text/css" href="../main.css/main.css">
</head>
<body>
<nav>
<ul>
<li> Home </li>
<li> Profile </li>
<li> Gallery </li>
</ul>
</nav>
<br>
<h1> The works </h1>
<br>
<!-- <section class="figure-img">
<figure class="photo">
<img src="https://i.pinimg.com/originals/ce/02/38/ce02382eed1d9b50fa50b4f4ee1f9600.jpg" alt="ying yang fish">
</figure>
<figure class="photo">
<img src="https://images.pexels.com/photos/18174/reflection-pad-gaming-gamepad.jpg?auto=compress&cs=tinysrgb&h=350" alt="captain">
</figure>
<figure class="photo">
<img src="https://images-na.ssl-images-amazon.com/images/I/61gG0598btL._SX342_.jpg" alt="tophat">
</figure>
<figure class="photo">
<img src="https://img3.stockfresh.com/files/b/beaubelle/m/25/686513_stock-photo-love-bird-with-gift-box-vector.jpg" alt="battlelady">
</figure>
<figure>
<img src="https://us.123rf.com/450wm/naum100/naum1001510/naum100151000017/45714786-gear-hand-drawn-icon-vector.jpg?ver=6" alt="wiretree">
</figure>
<figure>
<img src="https://thumb1.shutterstock.com/mosaic_250/2645560/1123343060/stock-photo-summer-quote-summer-vibes-1123343060.jpg" alt="fox">
</figure>
</section>
-->
<footer>
Codepen
Instagram
</footer>
</body>
</html>
Ps. If it helps the folders are as follows:
Desktop: (the folder is on my desktop)
Foundations (the name of the project folder on the desktop)
Gallery.html ( the name of the html page)
Gallery.html ( the name of the html document)
Related
I am trying to make AOS flip-up animations start when the page is initially loaded.
I am refering to the animations applied to img items in <div class="social-media"> , i am using the data-aos="flip-up" animation on these items.
Noob question: can i use multiple animation libraries in the same html file (on different elements ofc)?
Perhaps i should be using a different animation library other than AOS since that one is specifically meant for on-scroll animation, i was wondering if it was possible to do with AOS though. thanks
Currently the animations only start when i scroll down the page or when i refresh the page when already scrolled down. when i scroll up to the top of the page the animation for these images is played in reverse (the images flip down and they become invisible after the animation has finished). I tried finding how to make the animation start when page is loaded, i've seen suggestions to use javascript to animate a scrolling animation as such:
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
$(document).ready(function(){
$("body,html").animate({
scrollTop: 10
}, 1000);
$("body,html").animate({
scrollTop: 0
}, 1);
});
</script>
But adding this script snippet to my code doesnt seem to do anything (animations still behave the same). My current code:
<!Doctype HTML>
<head>
<title>Troos Bouw</title>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet'> <!-- Font -->
<link href="https://unpkg.com/aos#2.3.1/dist/aos.css" rel="stylesheet"> <!-- On scroll animations -->
<script src="https://unpkg.com/aos#2.3.1/dist/aos.js"></script> <!-- On scroll animations -->
</head>
<style type="text/css">
*{margin:0;}
html {
scroll-behavior: smooth;
}
/* Footer styles */
footer {
background-color: rgb(0, 0, 0);
position: fixed;
bottom: 0;
width: 100%;
padding-top: 1vh;
padding-bottom: 1vh;
padding-left: 1vh;
color: #fff;
/* padding: 1em; */
display: flex;
justify-content: space-between;
box-shadow: 0px 2px 10px 0px rgba(255, 255, 255, 0.5);
z-index:1002;
}
footer .social-media ul {
list-style: none;
margin: 0;
padding: 0;
}
footer .social-media ul a{
text-decoration: none; /* remove underline from social-links */
}
ul.footerlist li {
display:inline;
list-style: none;
}
.socials-img{ /* social icons; image size, background */
height: 2.5vh;
background-color: red;
opacity: 1
}
#filler{
background-color: aqua;
height: 1000vh;
}
.header{
position: fixed;
width:100%;
padding-bottom: 15px;
height: 80px;
background-color: rgba(2, 2, 2, 0.7);
box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.5);
z-index: 1000;
}
.header ul{
text-align: center;
}
.header ul li{
list-style: none;
display: inline-block;
padding-top: 9px;
background-color: red;
}
.header ul li a{
display: inline-block;
text-decoration: none;
text-transform: uppercase;
font: size 20px;
font-family: 'Raleway', sans-serif;
letter-spacing: 2px;
font-weight: 1000;
padding: 25px ;
color: rgb(252, 252, 252);
transition: all ease 0.5s;
border-radius: 20px;
}
.header ul li a:hover{
background-color: rgba(160, 159, 159, 0.5);
}
.logoText{
width:200px;
margin-left: 1vw;
margin-top:2.5vh;
position: fixed;
z-index: 1001;
background-color: red;
}
.logoIcon{
margin-top: 10px ;
height:100px;
margin-left: 90vw;
position: fixed;
z-index: 1001;
background-color: red;
}
</style>
<body>
<header id="theHeader">
<!-- WEBSITE NAME TOP LEFT -->
<img class="logoText" data-aos="flip-down" data-aos-duration="1000" data-aos-delay="100" src="img/troosText.png" >
<img class="logoIcon" data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1500" src="img/TROOS geen achtergrond 1.png" >
<!-- TOP NAV. MENU -->
<div class="header">
<ul>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#theHeader">home</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="#about">about</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">service</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">gallery</a></li>
<li><a data-aos="flip-down" data-aos-easing="linear" data-aos-duration="1500" href="url">home</a></li>
</ul>
</div> <!-- end of header -->
<!-- <div id="transparentDiv" class="down-arrow">
<div id="arrowText" style="display: flex; align-items: center; justify-content: center; font-size: 200%;">ARROWTEXT</div>
<img style="display: flex; align-items: center; justify-content: center;" src="img/UI/arrow.png" background-color="red ">
</div> Arrow button which when clicked scrolls down -->
<div id="transparentDiv" style="display: flex; flex-direction:column; align-items: center; justify-content: center;">
<img src="img/UI/troos text banner.png" background-color="red">
<img src="img/UI/view more button purple.png" >
<!-- <button class="grey-button">Our Projects
<img src="img/UI/arrow.png" class="arrow">
</button> -->
</div>
<!-- <img src="your-image-url.jpg" class="bg-img" alt="Background Image"> -->
<img src="img/Troos BG lowres_auto_x2.jpg" class="bg-img" alt="Background Image" >
</header>
</header>
<div id="filler">filler</div>
</body>
</section>
<footer>
<div class="social-media">
<h3>Connect with us</h3>
<ul class="footerlist">
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="100" data-aos-once="false" class="socials-img" src="img/socials/Socials_Insta.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="300" data-aos-once="false" class="socials-img" src="img/socials/socials_FB.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="500" data-aos-once="false" class="socials-img" src="img/socials/socials_WA.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="700" data-aos-once="false" class="socials-img" src="img/socials/socials_TW.png" > </li>
<li><img data-aos="flip-up" data-aos-duration="1000" data-aos-delay="900" data-aos-once="false" class="socials-img" src="img/socials/Socials_G+.png" > </li>
</ul>
</div>
</footer>
<script>
AOS.init();
AOS.refresh(); // initialize AOS animations
</script>
</html>
NOTE: I have added a red background color to the animated elements such that they are easily visible (theyre placed in the bottom left corner). Also added a big div "filler" to the body such that scrolling is possible.
What is strange to me is that in the header i've added some animated elements as well (same AOS animation) which for some reason do load immediately when the page loads even when scrolled all the way up. I've added the code for these header element
Thank you!
To stop the animation while scrolling back you can use attribute to element
data-aos-once="true"
https://github.com/michalsnik/aos#-advanced-settings
I'm trying to make a site with multiple sections. There are logos, that should take up the full screen. Then, as the user scrolls down, the logos should get smaller and shrink to the top of the screen, staying fixed to the top. They should push the section contents down so that they are fully visible.
The user can continue scrolling down to the next section. It should once again be the full page height, taking up the user's entire screen. It should push the previous logo header up out of the way, and repeat the same process, as the user scrolls down, it should get smaller, moving to the top of the screen, leaving space for the contents of the section.
However, unfortunately, the headers seem to be very jittery when I try to scroll down. The scrolling can even get stuck without moving the scrollbar with the mouse.
I have also found that after I scroll down past the second section, the first header pops up again.
Here is my site, with the minimal code to reproduce this problem:
The Site
The code is mainly copied from two w3schools tutorials, I have been trying to combine the two:
https://www.w3schools.com/howto/howto_js_sticky_header.asp
https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp
Any help would be greatly appreciated, and if anyone has any ideas on how this could be fixed, please, let me know!
Update: I've figured out that the issue seems to be that the scroll offset, once the header shrinks, ends up being lower than the offset required to shrink the header. So it cycles and jitters between shrunk and not shrunk. How do I fix this?
Code (No images, please open site link to test):
// When the user scrolls down 50px from the top of the document, resize the header's font size
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
console.log(document.documentElement.scrollTop);
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
document.getElementById("title").style.fontSize = "24px";
document.getElementById("title").style.height = "25vh";
document.getElementById("title").style.position = "fixed";
} else {
document.getElementById("title").style.fontSize = "96px";
document.getElementById("title").style.height = "100vh";
document.getElementById("title").style.position = "sticky";
}
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
document.getElementById("title").classList.add("sticky");
document.getElementById("title").style.fontSize = "12px";
document.getElementById("title").style.height = "10vh";
} else {
document.getElementById("title").classList.remove("sticky");
document.getElementById("title").style.fontSize = "96px";
document.getElementById("title").style.height = "100vh";
}
if (document.body.scrollTop > 960 || document.documentElement.scrollTop > 960) {
document.getElementById("title1").classList.add("sticky");
document.getElementById("l2").style.height = "50px";
document.getElementById("title1").style.height = "10vh";
} else {
document.getElementById("title1").classList.remove("sticky");
document.getElementById("l2").style.height = "500px";
document.getElementById("title1").style.height = "100vh";
}
}
:root{
--acol: #ffffff;
--bcol: #eeeeee;
--ccol: #dddddd;
--dcol: #999999;
}
html, body{
margin: 0px;
padding: 0px;
height: 100%;
text-align: center;
}
#bodycontainer{
display: flex;
}
#main{
width: 95vw;
height: 100%;
}
/* CARDS AND MAIN SCREEN*/
.title, #title, #title1{
background: var(--bcol);
width: 95vw;
overflow: visible;
display: flex;
justify-content: center;
margin: 0;
align-items: center;
position: sticky;
top: 0;
transition: 0.25s;
}
section{
width: 95vw;
}
#container{
background: var(--acol);
width: 100%;
display: flex;
flex-wrap: wrap;
}
.card{
flex: 1 0 21%;
max-width: 250px;
margin: 5px;
cursor: help;
}
.logo.two, #l2{
width: 50%;
height: 50px;
position: sticky;
position: -webkit-sticky;
display: flex;
top: 70px;
}
/*SIDEBAR*/
#sidebar{
background: var(--ccol);
position: fixed;
margin-left: 95vw;
width: 5vw;
height: 100%;
text-align: center;
font-family: "Helvetica";
display: flex;
align-items: center;
}
#circ{
width: 25px;
height: 25px;
background: var(--acol);
border-radius: 100px;
margin-left: auto;
margin-right: auto;
z-index: 999;
}
#tabs{
background: var(--bcol);
width: 25px;
margin-left: auto;
margin-right: auto;
height: fit-content;
border-radius: 25px;
}
.tab{
display: block;
width: 100%;
line-height: 25px;
z-index: 1;
}
#wrap{
position: absolute;
width: 5vw;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<!--MAIN CONTENT-->
<div id="bodycontainer">
<div id="main">
<!--ROLAND-->
<section>
<h1 class="title" id="title">Roland PN-D10 Series</h1>
<div id="container">
<img src="PN-D10-01_Vector_2X.png" class="card">
<img src="PN-D10-01_Vector_2X.png" class="card">
<img src="PN-D10-01_Vector_2X.png" class="card">
</div>
</section>
<!--DAVID GARFIELD-->
<section>
<h1 class="title" id="title1"><img class="logo two" id="l2" src="DGT.svg"></h1>
<div id="container">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
</div>
</section>
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
<img src="David_Garfield_Vector_2X.png" class="card">
</div>
<!--SIDEBAR-->
<div id="sidebar">
<div id="wrap">
<div id="circ"></div>
</div>
<div id="tabs">
<a class="tab" href="#a">A</a>
<a class="tab" href="#b">B</a>
<a class="tab" href="#c">C</a>
<a class="tab" href="#d">D</a>
</div>
</div>
</body>
</html>
Thanks!
I am trying to create a photo gallery app and came across some obstacles. I want to have each image take equal portion of the div, for example if there are two images, each image takes up 50% of the div, and if there are three images, each images takes up 33.33% of the div, etc. Further, is there a way to format those images to be in square dimensions through css?
Also, I have the photos-gallery div that contains h2 and photos-gallery-content div. Currently, I am hardcoding the height for the photos-gallery-content div to fit inside the parent div, but is there a way to make that div take the remainder of the height of its parent div?
Eventually I want the pictures to render dynamically using React so any recommendations/advice on that would help a lot too.
Here is my code:
#photos {
width: 634px;
height: 339px;
}
.photos-gallery {
width: 634px;
height: 275.03px;
}
.photos-gallery-header {
font-size: 24px;
font-weight: bold;
line-height: 32px;
color: #333333;
border-bottom: 1px solid #E1E1E1;
padding-bottom: 16px;
margin: 0 0 16px 0;
display: flex;
justify-content: space-between;
}
.photos-gallery-content {
height: 200px;
}
.photos-gallery-layout {
height: 200px;
overflow: hidden;
float: left;
display: flex;
margin: 0;
padding: 0;
}
.photos-gallery-layout li {
height: auto;
float: left;
list-style: none;
display: flex;
}
.photo {
display: inline-flex;
white-space: nowrap;
}
.photo img {
max-width: 100%;
max-height: auto;
display: inline-block;
vertical-align: middle;
}
<div id="photos-gallery" class="photos content-block">
<h2 class="photos-gallery-header"> 2 Photos </h2>
<div class="photos-gallery-content">
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
</div>
<div>
I used your HTML and wrote a little CSS to demonstrate how to:
Have any amount of items fit at equal widths in one row using flexbox (display: flex on the parent and flex: 1 on the children)
Have <img> elements crop to the shape of the tallest element (in this case, a square) using object-fit: cover (note compatibility on CanIUse)
.photos-gallery-layout {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.photos-gallery-li {
flex: 1;
}
.photo,
.photo img {
height: 100%;
}
.photo img {
width: 100%;
object-fit: cover;
}
<ul class="photos-gallery-layout">
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/8pTwPlXb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/OPAR3PCb.jpg" />
</div>
</li>
<li class="photos-gallery-li">
<div class="photo">
<img src="https://i.imgur.com/A8eQsll.jpg" />
</div>
</li>
</ul>
Explanation
I'm working on this template which uses MixItUp plugin in it. Basically, I have one simple, but difficult (at least for me, because I'm new to web dev) doubt that I'm trying to solve without success: I'd like to center the "filtered images".
Code
You can access it at CodePen here (for some reason CodePen wouldn't load an image other than the second one, so all of the 6 images at CodePen are the same).
You can also download it here.
$(document).ready(function() {
/* ======================================================================== */
/* Filtering
/* ========================================================================= */
$(".project-wrapper").mixItUp();
});
/*=========================================
Basic Style
==========================================*/
body {
line-height: 21px;
font-size: 13px;
}
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
a, a:focus, a:hover {
text-decoration: none;
}
body>section, .footer {
padding: 70px 0;
}
/*=========================================
Mix
==========================================*/
.work-filter {
margin-bottom: 35px;
}
.work-filter ul li {
display: inline-block;
}
.work-filter ul li a {
color: #062033;
display: block;
padding: 5px 17px;
}
.work-filter ul li a:hover, .work-filter ul li a.active {
background-color: rgba(31, 107, 76, 1);
color: #fff;
}
.mix {
display: none;
}
.work-item {
float: left;
width: 25%;
position: relative;
}
.work-item>img {
display: block;
height: 100%;
width: 100%;
}
/*=========================================
Media Queries
==========================================*/
/*============================================================
For Small Desktop
==============================================================*/
#media (min-width: 980px) and (max-width: 1150px) {
/* work */
}
/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/
#media (min-width: 768px) and (max-width: 979px) {
/* work */
.work-item {
float: left;
width: 33%;
}
}
/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/
#media only screen and (max-width: 767px) {
/* work */
.work-item {
float: left;
left: 5% !important;
width: 90%;
}
}
/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/
#media only screen and (min-width: 480px) and (max-width: 767px) {
/* work */
.work-item {
left: inherit !important;
width: 50%;
}
}
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<!-- meta charec set -->
<meta charset="utf-8">
<!-- Page Title -->
<title>MixItUp</title>
<!--=========================================
CSS
=========================================-->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!--=========================================
Essential jQuery Plugins
=========================================-->
<!-- Main jQuery -->
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- jquery.mixitup.min -->
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
<!-- Custom Functions -->
<script src="js/custom.js"></script>
</head>
<body id="body">
<section>
<div class="container">
<div class="row">
<div class="work-filter">
<ul class="text-center">
<li>All</li>
<li>Mix1</li>
<li>Mix2</li>
<li>Mix3</li>
<li>Mix4</li>
<li>Mix5</li>
<li>Mix6</li>
</ul>
</div>
</div>
</div>
<div class="project-wrapper">
<figure class="mix work-item mix1">
<img src="http://imgur.com/KZfjrVT.jpg" alt="">
</figure>
<figure class="mix work-item mix2">
<img src="http://imgur.com/GB54YZR.jpg" alt="">
</figure>
<figure class="mix work-item mix3">
<img src="http://imgur.com/afatbzS.jpg" alt="">
</figure>
<figure class="mix work-item mix4">
<img src="http://imgur.com/GvjT75d.jpg" alt="">
</figure>
<figure class="mix work-item mix5">
<img src="http://imgur.com/KJ9MaK6.jpg" alt="">
</figure>
<figure class="mix work-item mix6">
<img src="http://imgur.com/w3ZFVnq.jpg" alt="">
</figure>
</div>
</section>
</body>
</html>
Thanks in advance,
Luiz.
Try:
.project-wrapper {
text-align:center;
}
.work-item {
float: none;
width: 33%;
position: relative;
}
Someone has built a carousel for our webshop, but it is not functioning correctly. When you click one of the arrow buttons, the images will move to the left or right. But as you might have noticed already, the images just disappear into the void.
Obviously it should move to the first image when the last one has been reached and someone clicks on "next", and to the last image when the first one has been reached.
Note: the reason he used "jQuery" instead of "$" is because "$" is in conflict with Magento.
This is the code that is used:
HTML
<div class="gallery">
<div id="moveleft"><</div>
<ul class="gallery-content">
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_1_24.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_2_9.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_3_1_2.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_4_15.jpg" alt="">
</a>
</li>
<li>
<a href="http://test.prestaq.nu/media/catalog/product/cache/27/image/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" data-lightbox="roadtrip">
<img src="http://test.prestaq.nu/media/catalog/product/cache/27/image/300x/fae68339a485a19e15750344af4b35e2/4/2/42he_glas_5_15.jpg" alt="">
</a>
</li>
</ul>
<div id="moveright">></div>
</div>
CSS
ul, li { list-style: none; }
.gallery {
min-height: 340px;
overflow:hidden;
margin-top: 40px;
}
.gallery ul.gallery-content {
margin-left: 55px;
margin-right: 55px;
max-height: 300px;
overflow:hidden;
margin-top: -300px;
}
.gallery img {
float:left;
padding: 3px;
margin: 0 10px;
}
.gallery #moveleft {
height: 300px;
width: 50px;
line-height: 300px;
border: #CCC solid 1px;
margin-left: 0px;
font-size:45px;
padding-left: 2px;
}
.gallery #moveright {
height: 300px;
width: 50px;
line-height: 300px;
font-size:45px;
float: right;
margin-top: -300px;
padding-left: 2px;
border: #CCC solid 1px;
}
JS
jQuery(document).ready(function() {
jQuery('.gallery #moveleft').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "-=300px" //moves left
});
});
jQuery('.gallery #moveright').click(function() {
jQuery('.gallery li').animate({
'marginLeft' : "+=300px" //moves right
});
});
});
I would recommend using OwlCarousel for simple jQuery Carousel on Magento. This jQuery plugin also support touch slide (work very well on mobile), which is a plus if your Magento website is responsive.
Hope this help