Visual showcase carousel

I'm not asking for direct code, but I need help turning the division below into a slider. When a user clicks, the current display should shift left, and a new but similar-looking division will appear. As someone new to website development, I would appreciate some guidance on what to search for or any helpful links. Thank you.

HTML:

     <div id="first">
<img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>

CSS:

#first
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;
}
#first img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
}

Shape:

javascriptjqueryhtmlcss

Answer №1

Include arrows on each side with images depicting left or right directions, then implement something similar to this code snippet. First, enclose two pictures within a div that allows for overflow-hidden:

window.left = function () {
    $('img:first').before($('img:last').get(0).outerHTML);
    $('img:last').remove();
}
window.right = function () {
    $('img:last').before($('img:first').get(0).outerHTML);
    $('img:first').remove();
}


$('img:even').css('opacity','.6');  // reduce opacity of even images

window.left = function () {
    $('img:first').before($('img:last').get(0).outerHTML);  // place a copy of the last picture before the first one
    $('img:last').remove();  // delete the last picture from the stack
}
window.right = function () {
    $('img:last').before($('img:first').get(0).outerHTML);  // insert a duplicate of the first picture after the last one
    $('img:first').remove();  // eliminate the first picture from the stack
}
html {
    font-size: 50px;
}
#first {
    overflow: hidden;
    height: 150px;
    width: 740px;
}
img {
    margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <p onclick="left()">
                <</p>
        </td>
        <td>
            <div id="first" style="display:inline-block;">
                <img id="image1" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image2" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image3" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image4" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image5" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image6" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image7" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image8" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image9" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image10" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
            </div>
        </td>
        <td>
            <p onclick="right()">></p>
        </td>
    </tr>
</table>

The code executes as intended, though I utilized identical images throughout, making the even ones slightly faded in color.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error "Cannot set headers after they are sent" is causing issues with the functionality of the Express session

Ensuring secure authentication for my Node.js application is a top priority. I have implemented the use of express-session npm to achieve this goal. The idea is that upon successful login on the /login page, a session should be initiated and the user shoul ...

javascriptnode.jssessionexpress

Loading static assets in Express.js

I am currently utilizing express for developing a web application. However, I am encountering issues with my routes and static files. I have included a reference to static files: app.use(express.static(path.join(__dirname, 'public'))); and conf ...

javascriptnode.jsexpress

Validation of Style

Is there a way to translate the following CSS code into JavaScript? Basically, I want it to apply the style rules after the onchange event. .appnitro input:required:valid, .appnitro textarea:required:valid { box-shadow: 0 0 5px #5cd053; border-c ...

javascripthtmlcss

retrieve the information stored in the rows of the table

Here is the arrangement, with numerous div class="extra" elements in my project. <div class="extra"> <table width="90%"> <colgroup> <col width="40%"/> <col width="30%"/> <col width="30% ...

javascriptjqueryhtml

Disregarding TypeScript import errors within a monorepo ecosystem

In my Turborepo monorepo, I have a Next.js app package that imports various components from a shared package. This shared package is not compiled; it simply contains components imported directly by apps in the monorepo. The issue arises with the shared co ...

javascripttypescript

Spirit.py navigates using javascript

Having trouble with Ghost.py. The website I'm trying to crawl uses javascript for paginated links instead of direct hrefs. When I click on the links, selectors are the same on each page so Ghost doesn't wait since the selector is already present. ...

javascriptpythonghost.py

Using jQuery to append content with a variable as the source

Recently delving into jQuery and encountering an issue with getting my variable inside src when using append. Either it's not functional at all, or just displaying the variable name in string form in the console. Here is the code causing trouble: va ...

javascriptjqueryhtml

What could be causing the delay in my scroll event with React Three Fiber?

While using React Three Fiber, I encountered an issue with a react component that generates a sprite which is supposed to remain constant in size regardless of camera zoom. Although the algorithm appears to be functioning correctly (the size does not chang ...

javascriptreactjsthree.jsreact-three-fiber

Activating/Deactivating the Submit Button with jQuery and Bootstrap

Some of my form fields are outside of the <form> tag. I want the form to be disabled on load, and only enable once users input data into multiple fields. I'm facing two issues. Firstly, the jQuery code I have only works for one field at a time. ...

javascriptjquerynode.jsbootstrap-4electron

The image source is visible in Vue.js, but unfortunately, my picture is not showing up

Below is the code and script that I have: <template> <div class="tasks_container"> <div class="tasks_content"> <h1>Tasks</h1> <ul class="tasks_list"> ...

javascripthtmlcssvue.jsdom

fill out an HTML form and send it in

When submitting a form with two components, only the first form 'School' and the submit button itself are successfully submitted. The second form 'pool' seems to disappear somehow. <form method='get'> <select nam ...

phpjavascripthtml

Incorporating Sass into an HTML document

Recently, I discovered Sass and went through its documentation. I successfully installed the package on my Ubuntu system alongside Ruby and Haml. Now I'm eager to learn how to use it with Wordpress or a basic HTML file. Being new to this, I'm see ...

htmlcsssass

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

javascripthtmlcss

Trouble in testing: ComponentDidMount is mysteriously bypassed by Jest/Enzyme when it's supposed to be triggered

In my code, there is a method called componentDidMount that triggers the fetchUser() function. I am currently working on testing the componentDidMount method. Here is the Component Code: static propTypes = { match: PropTypes.shape({ isExact: Pr ...

javascriptreactjsunit-testingjestjsenzyme

Obtain the chosen label from the selection dropdown

$scope.states = [ {"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"}, {"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"}, {"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"}, {"state_id":4,"state_code":"AS ...

jqueryangularjsjsonjspselect

Exploring ways to iterate through an array of objects to extract specific values

Kindly read this information thoroughly before marking it as a duplicate. I currently possess an array of objects as shown below. const filterParams = [ { 'waterfront_type[]': 'Cove' }, { 'area[]': 'Applehead ...

javascriptarrays

When it comes to designing responsive websites, the use of `@

Being new to CSS, I am open to criticism and feedback. @media (max-width: 735px) {... } @media (min-width: 735px) {... } @media (width: 320px) {... } @media (width: 360px) {... } @media (width: 375px) {... } @media (width: 414px) {... } I have tried us ...

cssmedia-queries

What steps can I take to eliminate the single pixel gap between my table cells?

I've been tasked with creating an email campaign that doesn't allow the use of CSS, and it's proving to be quite a challenge. One particular issue I'm facing is with a table where the corner pieces are offset by one pixel from the rest ...

htmlhtml-tablehtml-email

Set the error state of a TextField in Material UI to true based on the user's input

Being a newcomer to React and Javascript, I have made some progress but now find myself stuck. I am struggling with how to change the error state of a Material UI TextField based on user input. Specifically, I want the error to be triggered if the user inp ...

javascriptreactjsmaterial-ui

Get rid of the lower padding on a handsontable

I am currently using either Chrome Version 61.0.3163.100 (Official Build) (64-bit) or Safari Version 11.0 (12604.1.38.1.7) on Mac OS Sierra 10.12.6. I am looking to create a handsontable that may exceed the screen height: Click here for an example As I ...

cssheightmarginhandsontable