Creating an Image slideShow with only one Image - making it slide on itself

Apologies for this confusing and vague question.

Imagine I only have a single image, and I want to create a slideshow using technologies like Angular, jQuery, JavaScript, or just CSS.

What I am aiming for is when the user clicks on my slide button, the image should slide out to the right while simultaneously sliding in from the left.

(The part of the image that slides out to the right should come in from the left at the same time)

This way, the image never actually disappears from view, it just moves within itself.

I've tried doing this with AngularJS, but I can't seem to get it to happen simultaneously. When the image slides to the left, it then comes back in from the right, leaving a moment where the view is empty. I want to avoid this.

Please help me with a plugin, a CSS example, an Angular demonstration, JavaScript code, or anything you think might work.

Asking for assistance here is my final resort after spending a month searching and coding without success.

javascriptjqueryhtmlcssangularjs

Answer №1

Utilizing CSS opens up a world of possibilities.

One technique involves using pseudo elements, text-indent, transition, and pointer-events to create a toggle effect when clicked.

By including the tabindex attribute in HTML, the div can be focused on via click or even using the tab key.

Check out the DEMO here.

HTML

<div class="slidebif" tabindex="0"><img src="http://lorempixel.com/200/300/people/9"/></div>

CSS

.slidebif {
  margin:1em auto;/* optional*/
  cursor:pointer;/* indicates it is clickable */
  width:200px;/* image width*/
  white-space:nowrap;/* ensures img and cloned pseudo stay on same line */
  text-indent:0;/* set for transition effect */
  transition:0.5s;/* adjust according to preference */
  overflow:hidden;/* hides the pseudo element */
}
.slidebif:after {
  content: url(http://lorempixel.com/200/300/people/9);/* displays the same image as img src */
}
.slidebif:after, .slidebif img {
  vertical-align:top;/* optional*/
}
.slidebif:focus {
  text-indent:-200px;/* brings pseudo element into view */
  pointer-events:none;/* prevents capturing clicks, loses focus if clicked again */
}

Try a variant with a 2 columns table here.

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

What is causing the child table (toggle-table) to duplicate every time a row in the parent table is clicked?

After creating a table containing GDP data for country states, I've noticed that when a user clicks on a state row, the child table displaying district GDP appears. However, there seems to be an issue with the child table as it keeps repeating. I&apos ...

javascripthtmlvue.js

Sending a variable to a template in AngularJS

I am looking for a way to pass a variable or text to a template in order to display the value within my template. While browsing through resources, I found an example on jsFiddle that demonstrates this functionality using ng-repeat. However, I am curious ...

javascriptjqueryhtmlangularjs

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

cssreactjsmaterial-uijss

Storing information within a Express application using Postgres

Recently, I've been delving into the world of Express and experimenting with a program that allows users to create events and invite others. While I know about using join tables to retrieve data, I'm curious if there's a way to organize the ...

javascriptarrayspostgresqlexpresssequelize.js

Anticipate await and fulfill promises

I'm encountering issues when attempting to refactor nested Promise.all's into async/await. It seems like there might be a misunderstanding in how I should be utilizing Promise.all and await. The goal is to iterate through an array, perform an ac ...

javascriptnode.jspromiseasync-awaites6-promise

Exploring nested components traversal in React

In my project, I have created a product component that displays the products' name, price, and description. const Product = (props) =>{ return( <div> <p>Price: {props.price} </p> <p>Name: ...

javascriptarraysreactjs

Scraping HTML data without <div> tags with Scrapy - how to do it?

After spending hours attempting to extract a specific data set for use with Scrapy in a web scraping project, here is the current python code: bedrooms_info = house_listing.css( '.search-results-listings-list__item-description__charact ...

pythonhtmlweb-scrapingscrapy

Troubleshooting: AngularJS ng-click function not functioning properly within a dynamically generated template in

In my Angularjs project, I have set up a directory specifically for an inline editor. The approach involves creating the HTML template using a function and then compiling it with the HTML root element. However, I am facing an issue where I am unable to cha ...

angularjstemplatescompilationdirectiveangularjs-ng-click

The module specifier "tslib" could not be resolved due to a TypeError. It is necessary for relative references to begin with either "/", "./", or "../"

Hey there, I recently started learning npm. I'm trying to install "@fullcalendar" and use it, but I keep getting this error message: "Uncaught TypeError: Failed to resolve module specifier "tslib". Relative references must start with either "/", "./", ...

javascriptnpmfullcalendarnode-modules

Implementing conditional statements using jQuery for multiple selections

Having two unique IDs, I am planning to set a condition that corresponds with my query. $("#foo", "#bar").foo.bar({ baz: function() { if(selector == "#foo") { console.log("foo"); } else { console.log("bar"); } } }); ...

javascriptjquery

Populating a drop-down menu using Python requests in a select tag

I am attempting to select/enter a value into a dropdown menu using Python Requests, but for some reason it is not working. Here is the HTML code: <select name="hourly_rate" class="default-input" id="hourly_rate"> <o ...

pythonhtmlselectweb-scrapingpython-requests

The issue with Node module @kenjiuno/msgreader is that it is unable to find the constructor for MsgReader

I've been having trouble getting the example code for parsing Outlook .msg files using @kenjiuno/msgreader to work. Despite successfully installing the module with npm, my code doesn't seem to function as expected: const fs = require('fs&apo ...

javascriptnode.jsnpmmodulepackage

Error encountered while invoking web server method in C# through ajax resulting in a 500 Internal Server Error

Occasionally encountering a 500 internal server error when calling a server method from an AJAX request has left me perplexed. The inconsistency of the issue, sometimes working fine and sometimes not, is baffling. To add to the confusion, no changes were m ...

javascriptc#jqueryjsonajax

Expanding the width of CSS dropdown menus according to their content

When attempting to create a dynamic dropdown menu, I encountered an issue where the values were skewed in Internet Explorer if they exceeded the width of the dropdown. To fix this problem, I added select:hover{width:auto;position:absolute}. However, now th ...

javascripthtmlcssdrop-down-menu

The onChange event of the dropdownlist in MVC is not functioning correctly and is not properly triggering the action

Hey everyone, I'm trying to achieve a functionality where changing the selection of a dropdown list will trigger an AJAX call to a specific action with some data being passed. Below is the code I have implemented for this purpose. Despite verifying th ...

javascriptjqueryajaxasp.net-mvc-4onchange

Combining results from multiple subscriptions in RxJS leads to a TypeScript compiler error

I am utilizing an Angular service that provides a filterObservable. To combine multiple calls, I am using Rx.Observable.zip(). Although it functions as expected, my TypeScript compiler is throwing an error for the method: error TS2346: Supplied paramete ...

angularjstypescriptrxjs

Tips for modifying padding in HTML and CSS?

I'm struggling to add padding around the image without affecting the mobile view. Here's what I've tried: float-right or padding-right:250px; // but nothing happens and it affects the mobile view. Please review my code: .fontProfile ...

htmlcsshtml5-canvasmedia-querieshtml5-video

The scrollOverflow feature in fullPage.js is not properly detecting the height of dynamically generated content

I have successfully implemented fullpage.js on my website. Everything is working perfectly with fullpage.js, but I am facing an issue when trying to open a div on click of pagination. Specifically, the browser scroll gets disabled when the div containing a ...

javascriptjqueryhtmlfullpage.js

Tips for accessing the HTML code of a TextBox in JavaScript while utilizing HTMLEditorExtender

Currently, I am utilizing the HTMLEditorExtender ajax tool on my website. The data is being saved in HTML format into the database and then retrieved within my project without any issues. However, there is a setback that I have encountered... When attemp ...

javascriptjqueryhtmlasp.netasp.net-ajax

What is the best way to activate the li tag based on the information in a json data loop?

https://i.sstatic.net/iXqyU.png I am currently working with a JSON file that contains page titles and content data. Here is an example of the JSON structure: [ { "title":"About", "content":"About me . . . . . . " }, { "title":"Contact", "c ...

arraysjsonangularjsangularjs-ng-repeat