Swipe.js strange result with Media Queries

Swipe.js strange result with Media Queries - javascript

Im having an issue while using media queries with "Swipe".
If i open my website in "tablet" mode, the swipe works in Mobile and Tablet forms, Desktop wont.
BUT, if i save my files again in the text editor and open them in Desktop mode, they work, but not in Mobile and Tablet.
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
-ms-touch-action: none;/*pan-y on desktop*/
touch-action: none; /*pan-y on desktop*/
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-dois">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 2:</h2>
<img src="img/passodoisilu.svg" class="passoumilu">
<p>Now your coach gets the results of your efforts and publish them in the box page on Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-tres">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 3:</h2>
<img src="img/passotresilu.svg" class="passoumilu">
<p>Remember, get up your energy levels and while you're at it, check your WOD results and progress in Crossagenda.</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
<div class="mySlides">
<div class="passo-quatro">
<div class="passoscont">
<h1>How?</h1>
<h2>Step 4:</h2>
<img src="img/passoquatroilu.svg" class="passoumilu">
<p>Chat with your colleagues in our app or poke them in your next class ;)</p>
<img src="img/swipeleft.png" class="swipeleftcontent">
<img src="img/swipeleftdesktop.png" class="swipeleftcontent-desktop">
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.mySwipe = Swipe(document.getElementById('slidepassos'));
</script>

Related

Load More Button with jQuery

I recently approached to javascript and jQuery; I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made.
The code has been corrected in the following anwers
$(function() {
$(".Box-Hidden").slice(0, 8).show();
$("#loadMoreCont").on('click', function(e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0, 2).slideDown();
if ($(".Box-Hidden:hidden").length == 0) {
$("#load").fadeOut('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="GridContent">
<div class="Portfolio">
<!-----image 1 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="#" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="#">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>

Some issues in your code are that the classes and ID's are mixed up in the JS. In particular the loadMore button and how many items you're choosing to show via "slice". It would also help to use a more general or "semantic" friendly name for your containers instead of Box-Hidden because it's not always hidden and it's purpose is more like a card block, so naming it something like "card" might be best. The example below shows the Load More button and then disappears after displaying the rest of the cards.
// slice is choosing the first 2 instances of "Box-hidden" and showing them
$(".Box-Hidden").slice(0, 2).show();
// if there are Box-Hidden set to display:none (hidden) then show the loadMore button
if ($(".Box-Hidden:hidden").length != 0) {
$("#loadMore").show();
}
$("#loadMore").on('click', function(e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0, 2).slideDown();
// if there are no more hidden Box-Hidden's then hide the loadMore button
if ($(".Box-Hidden:hidden").length == 0) {
$("#loadMore").fadeOut('slow');
}
// This is not related to the show more, this just brings you back up the page
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="GridContent">
<div class="Portfolio">
<!-----image A ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=1">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image B ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=2">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 1 ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=3" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden" style="display: none;">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="http://placekitten.com/200/300?image=4">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>

When you use
$("#loadMoreCont").on(...)
it is supposed you have a html tag having the id with that name:
<div id="loadMoreCont">
...
</div>
When you use
$(".loadMoreCont").on(...)
it is supposed you have a html tag having the class with that name:
<div class="loadMoreCont">
...
</div>
Update
$(function () {
$(".Box-Hidden").slice (0, 2).show(); // showing 2 initial images
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden").slice(0,2).slideDown(); // adding 2 images on load more click
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
Your code seems work fine. I commented out some interesting lines.
Hope this helps.

your #loadMoreCont JS file on line 4 is targeted at an ID (#).
but on your html loadMoreCont as a class (.)

The question is: " I would like to create a load more button for the image grid on my website, the grid have 4 column and right now 16 images with a hover overlay effect and with a tag . I tried to follow many tutorials, I can't find and understand the mistake I made"
Here the updated code after the kind correction of the users #Kurohige and #WkL
HTML
<div class="GridContent">
<div class="Portfolio">
<!-----image 1 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp1">
<div class="GridItemsCont">
<img src="#" class="gridimg">
<div class="infos infocolor1">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----image 2 ------>
<div class="Box-Hidden">
<a href="#" class="SpanProp2 ">
<div class="GridItemsCont">
<img src="#">
<div class="infos infocolor2">
<p>logo</p>
<button>Learn More</button>
</div>
</div>
</a>
</div>
<!-----total 16 images----->
</div>
</div>
<div class="loadMoreCont">
Load More
<img class="loadImg" src="images/arrow.png">
</div>`
CSS
.GridContent {
width: 100%;
height: auto;
}
.Portfolio {
width: 95%;
height: auto;
margin: auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto;
grid-gap: 5px;
padding-top: 4%;
}
.Box-Hidden {
display: none;
}
JQUERY
<script>
$(function () {
$(".Box-Hidden").slice (0, 8).show();
$(".loadMoreCont").on('click', function (e) {
e.preventDefault();
$(".Box-Hidden:hidden"). slice(0,2).slideDown();
if ($(".Box-Hidden:hidden"). length == 0){
$("#load").fadeOut ('slow');
}
$('html,body').animate({
scrollTop: $(this).offset().top
}, 1500);
});
});
</script>
<script src="jQuery/jquery-3.4.1.js"></script>

How to append data with jquery using a for loop? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I am trying to add this to a div in my document but the selection items are all stacking on top of each other even though I'm setting them up in different columns. I think its because I am looping through it and its creating an exact copy of itself and they're stacking on each other. CSS wont fix it either. I've tried wrapping the col-md-3 class outside of the div thats outputting the javascript no luck. I'm really stuck. When I've used React its been easy to do stuff like this with JSX, but I'm having trouble here. Also I should mention that the classes aren't linked to any css. I just named them but they don't do anything. All the styles are inline and can be seen in the jquery.
for (var i = 0; i < works.length; i++) {
$('#work-items').append("\
<div class='col-md-3'>\
<div class='portfolio-item'>\
<span class='work-name'" + works[i].name + " ></span>\
<a href='" + works[i].link + "' class='work-img weblink' style='text-decoration: none; font-size: 1.2em; color:salmon'>\
<img class='img-responsive img-thumbnail' style='height: 150px; width: 300px' src='" + works[i].pic + "'>\
<span class='info'><p class='proj-title'></p>" + works[i].title + " </span > \
</a >\
<a href='" + works[i].github + "' class='work-img github' style = 'text-decoration: none; color: DodgerBlue; font-size: 1.2em' > \
</a >\
</div >\
</div >\
");
}
I doubt this is needed but heres the array of objects I'm getting the data from.
var works = [
{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
},
]
Link to HTML/CSS Output
Here is the rendered HTML
<html lang="en">
<body>
<div class="container">
<h1 class="name">jJonathan</h1>
<h4 class="title">...</h4>
</div>
<div class="container">
<div id="work-items" class="row">
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/BikesberlinCollage.jpg"> <span class="info"><p class="proj-title"></p>Ecommerce Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" vue=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/projekt.png"> <span class="info"><p class="proj-title"></p>Project Manager</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails="" |="" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/recipeapp.png"> <span class="info"><p class="proj-title"></p>Recipe Sharing App</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" ruby="" on="" rails=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/jobs.png"> <span class="info"><p class="proj-title"></p>Job Board Application</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/weather.png"> <span class="info"><p class="proj-title"></p>Weather Checker</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" react="" |="" firebase="" redux=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/planner.png"> <span class="info"><p class="proj-title"></p>Planner</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/form.png"> <span class="info"><p class="proj-title"></p>Javascript Form</span> Github </div>
</div>
<div class="col-md-3">
<div class="portfolio-item"> <span class="work-name" javascript="" |="" react=""></span> <img class="img-responsive img-thumbnail" style="height: 150px; width: 300px" src="img/workimg/reactchat.png"> <span class="info"><p class="proj-title"></p>React Chat App</span> Github </div>
</div>
</div>
</div>
<script src="js/work.js"></script>
<script src="js/script.js"></script>

Assuming you are using bootstrap I have to ask if the #work-items has a class of "row".
Besides that, one wonders if the css for any of the non-bootstrap elements you are adding, here, is getting in the way.
If you replace all of the html inside col-md-3 with simple works[i].link does the wrong behavior still occur?

Can you check on padding and margin provided to the CSS classes portfolio-item and work-items also can you try once with col-lg-3 class, I doubt your screen resolution may be leading to the view optimized for mobile where divs are stacked oon top of each other, although in the snapshot the screen size doesn't appear to be an issue.

Spent hours trying to figure this out. Thanks alot for the help. I had an extra character in my bootstrap CDN link. Sorry for wasting everyone's time -_-.

Besides the code you provided works as expected in a minimal environment (which means you should inspect your .col- elements and see which rule messes the position property), here's how you can create and apply a template over an array of items:
How to append data to DOM using a loop or .map()
var works = [{
name: "Ruby on Rails | Javascript",
title: "Ecommerce Application",
pic: "img/workimg/BikesberlinCollage.jpg",
link: "https://bikesberlinworldwide.herokuapp.com",
github: "https://github.com/bklynbest/Bikeshop-Ecommerce-app"
},
{
name: "Ruby on Rails | Vue",
title: "Project Manager",
pic: "img/workimg/projekt.png",
link: "https://britanniaprojectmanager.herokuapp.com",
github: "https://github.com/bklynbest/projektmanager"
}
];
const template_item = ({name,title,pic,link,github}) => `
<div class="col-md-3">
<div class="portfolio-item">
<h4 class="work-name">${name}</h4>
<a href="${link}" class="work-img weblink">
<img class="work-thumb img-responsive img-thumbnail" src="${pic}" alt="${title}">
</a>
<p>
${title}
GitHub: ${github.substring(github.lastIndexOf("/")+1)}
</p>
</div>
</div>`;
const items = works.map(template_item);
$('#work-items').append(items);
.work-img {
text-decoration: none;
}
.work-thumb.img-thumbnail {
height: 150px;
width: 300px;
}
.work-link,
.work-github {
font-size: 1.2em;
color: salmon;
}
.work-github {
color: dodgerblue;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div class="container">
<div id="work-items" class="row"></div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
PS:
Loop only to create/concatenate strings or prepopulate an array with your items Elements
Append only once! (not multiple times inside a loop)
Don't wrap <p> inside <span>
Do use alt tags

icon to center on click

I have icons over image as shown below.
index.php
<div class="container-fluid" >
<h1 id="service" data-animate="fadeInLeft" data-delay="200">Our Services</h1>
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img" id="services_img">
<p class="service_p" id="p" style="padding-bottom: 2px;"></p>
<h1 class="service_head" id="desc"></h1>
<section class="customer-logos slider" style="top: 35%;padding-left: 50px;" id="service_images">
<div class="slide">
<img class="image_service contrast" id="image_service_1" src="images/services_icons/drafting.png" alt="drafting" onclick="desc1()">
<div class="head_service" style="color:white;margin-left: -10px;">Drafting Services</div>
</div>
<div class="slide"><img class="image_service" id="image_service_2" src="images/services_icons/Emerging market penetration.png" alt="Emerging market penetration" onclick="desc2()">
<div class="head_service" style="color:white;margin-left: -15px;">Emerging market<br><span id="penetrate" style="margin-left: 15px;">penetration</span></div>
</div>
<div class="slide"><img class="image_service" id="image_service_3" src="images/services_icons/Engineering analytics.png" alt="Engineering analytics" onclick="desc3()">
<div class="head_service" id="engg_analytics" style="color:white;margin-left: -15px;">Engineering Analytics</div>
</div>
<div class="slide"><img class="image_service" id="image_service_4" src="images/services_icons/Industrial IoT.png" alt="Industrial IoT" onclick="desc4()">
<div class="head_service" style="color:white;margin-left: -5px;">Industrial IoT</div>
</div>
<div class="slide"><img class="image_service" id="image_service_5" src="images/services_icons/Life cycle.png" alt="Life cycle" onclick="desc5()">
<div class="head_service" style="color:white;margin-left: -2px;">Life Cycle</div>
</div>
text.css
.bg-img {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
opacity: .6;
}
text.js
$('#image_service').click(function() {
$('#image_service').animate({
'marginTop' : "-=30px" //moves up
});
});
I need a solution for this:
When i click on the icon it should be moved to center. I am able to move icon but it is not getting out exactly what i need.
Thank you in Advance!!

A simple jquery code need to be implemented on the icon click.
CSS:
.iconOne { position:relative }
.iconOne.centered { top:-100px; }
jS:
$(".iconOne").click(function(e) {
$(this).addClass("centered");
});
Comment if this is what you want like.
Thanks

W3.css Conflicting with JQuery UI Progress Bar

I am at my last straw with this one. I cannot figure this out and it has been three days now of trying. I am using w3.css with jQuery UI and jQuery UI.css.
ISSUE: The progress bars appear but don't fill. When you remove the href to w3.css, the progress bars work just fine. But otherwise, the fill doesn't occur.
FIDDLE: http://jsfiddle.net/kjg95pxq/7/
HTML
<body class="w3-content" style="max-width:1300px">
<!-- ROW 3.1: Skillsets Section -->
<div class="w3-container">
<div class="progressbar w3-center" id="progressbar" data-value="50">
<p style="position:absolute">20%</p>
</div>
</div>
<div class="w3-row" id="rowWaypoint2">
<div class="capsuleBox3 animated" id="capBox3">
<div class="w3-half w3-dark-grey w3-container w3-center" id="contact" style="height:700px">
<div style="padding-top:55px">
<h1>Skillsets</h1>
<p>My current skill progressions</p>
</div>
<!-- Progress Bar for JavaScript/jQuery -->
<div style="padding-top:18px">
<p> Tacos </p>
</div>
<div style="padding-top:0px">
<div class="progressbar w3-center" data-value="40">
<p style="position:absolute">20%</p>
</div>
</div>
<div class="progressbar w3-center" id="progressbar" data-value="80">
<p style="position:absolute">20%</p>
</div>
<div class="progressbar w3-center" data-value="20">
<p style="position:absolute">20%</p>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
</body>
CSS
.progressbar {
width: 80%;
margin: 20px auto;
}
.ui-progressbar-value {
transition: width 0.5s;
-webkit-transition: width 2s;
}
JS
$(document).ready(function() {
pbRun();
function pbRun() {
$(".progressbar").progressbar();
//this initializes the widget
$(".progressbar").each(function() {
var valPB = parseInt($(this).data('value'));
var percentPB = valPB;
$(this).progressbar("option", "value", percentPB);
});
}
});

Try using:
.ui-progressbar .ui-progressbar-value {
box-sizing: content-box;
}
w3.css adds:
*, *:before, *:after {
box-sizing: inherit;
}
which messes with code.
JSfiddle

jQuery left and right button scroll

I've been trying to figure this out for a couple days now and can't seem to make any headway. I am trying to do a simple left and right scroll using images as the scrollers but I can't seem to get it to work. Here is my code: http://jsfiddle.net/7GrTM/1/
HTML
<div class="outerwrapper">
<div class="innerwrapper">
<div class="productsbox">
<img class="box_image" src="images/productsbox1.png" style="width:222px" alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox2.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox3.png" style='width:222px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox4.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox5.png" style='width:221px' alt="this"/>
</div>
<div class="spacer"></div>
<div class='productsbox'>
<img class='box_image' src="images/productsbox6.png" style='width:221px' alt="this"/>
</div>
</div>
</div>
<div class="productspace">
<img src="images/arrowleft.png" id="#left" alt="left"/>
<img src="images/arrowright.png" id="#right" style="padding-left: 10px;" alt="right"/>
</div>
JS
$(function () {
$("#right, #left").click(function () {
var dir = this.id == "right" ? '+=' : '-=';
$("#outerwrapper").stop().animate({ scrollLeft: dir + '422' }, 1000);
});
});
CSS
.spacer {
width: 20px;
height: 319px;
display: inline-block;
}
.outerwrapper {
margin: 0px auto;
width: 1050px;
height: 323px;
display: inline-block;
overflow: hidden;
}
.innerwrapper {
width: 1600px;
height: 322px;
margin: 0 auto;
display: inline-block;
overflow: hidden;
}
Any help will be appreciative.

Your IDs are wrong, you have named them #left and #right, not simply left and right. In your JSfiddle you have managed to set this as the id: #left1 and #right1.
Solution: Change the ID's to say left and right, so you will have:
<div class="productspace">
<img src="images/arrowleft.png" id="left" alt="left"/>
<img src="images/arrowright.png" id="right" style="padding-left: 10px;" alt="right"/>
</div>
You are also trying to access your div with class outerwrapper as a id, not as a class. Either change outerwrapper to be an ID so <div id="outerwrapper"> or change the jquery to look for the class: $(".outerwrapper") (the prior solution is in my mind superior, so change div id).

Develop Reference

JavaScript is the programming language of the Web.

Swipe.js strange result with Media Queries - javascript

Related

Load More Button with jQuery

How to append data with jquery using a for loop? [closed]

icon to center on click

W3.css Conflicting with JQuery UI Progress Bar

jQuery left and right button scroll

Categories

Resources