Is there a way to create a Swiper slider similar to the one used in the App Store

I am looking to create a slider using Swiperjs similar to the carousel on the Apple App Store (seen on the Games tab).

I attempted to implement it using Vue Swiper, a package for vue, as shown below:

HTML code:

<div id="app">
  <h1>Slider</h1>
  <!-- Slider main container -->
<vue-swiper url="http://www.google.com"></vue-swiper>


  <div>

CSS:

ody {
  background: #f0f0f0;
  font-family: Tahoma;
}
#app{
  width:400px;
  height:700px;
  background:white;
  margin: auto;
  border-radius: 10px;
}
h1 {
  padding: 30px 10px 0 10px;
}
.swiper-container {
    padding-top: 10px;
    width: 100%;
    height: 180px;
}
.swiper-slide {
  width: 300px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  background: url('https://i.vimeocdn.com/video/376634544.jpg?mw=1920&mh=1080&q=70');
  background-size: cover;
}

Javascript code:

ue.component('vue-swiper', {
    data: function() {
        return {
           imageItems:[]
        };
    },
  props:['url'],
    mounted: function () {
        var mySwiper = new Swiper ('.swiper-container', {
                        slidesPerView: 'auto',
                        spaceBetween: 10,
                        centeredSlides:true,
                        direction: 'horizontal',
                        loop: false,
                        // pagination: '.swiper-pagination',
                        // paginationType:'bullets',
                        nextButton: false,
                        prevButton: false,
        }); 
  },
  template:`
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
        <div class="swiper-slide"></div>
    </div>
    // <div class="swiper-pagination"></div>



</div>
  `
});
var app = new Vue({
  el: '#app',
  data: {

  },

})

Is there a way to adjust the positioning of the first and last slide to float left and right, respectively, instead of being centered as in the current setup?

Answer №1

I finally found a resolution to my problem.

When Swiper initializes on mount, I apply custom styling:

on: {
  init: function () {
    document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
  },
}

During the touchend event (swiper event)

mySwiper.on('touchEnd', function () {
            setTimeout(() => {
                if (mySwiper.activeIndex == 0) {
                    document.getElementById('wrapper').style.transform = "translate3d(10px, 0px, 0px)"
                }
                if (mySwiper.activeIndex == mySwiper.slides.length - 1) {
                    var translate_last = mySwiper.snapGrid[mySwiper.activeIndex] + mySwiper.snapGrid[0] + 10;
                    var translate_style = 'translate3d(-' + translate_last +  'px, 0px, 0px)';
                    document.getElementById('wrapper').style.transform = translate_style
                }
            }, 10);

        });

Take a look at my latest Codepen creation

Answer №2

Ensure the event is fired only at the end of the process. If you slide back, it should not revert the slides to their initial positions.

Modify it to mySwiper.on('progress', ...

swiper.on('progress', function(){
  setTimeout(() => {
    if (swiper.activeIndex == 0) {
        $(".swiper-slide").css('transform', 'translate3d(125px, 0px, 0px)');
    }
    if (swiper.activeIndex == swiper.slides.length - 1) {
        var translate_last = swiper.snapGrid[swiper.activeIndex] + swiper.snapGrid[0] + 10;
        var translate_style = 'translate3d(-' + translate_last +  'px, 0px, 0px)';
        $(".swiper-slide").css('transform', translate_style);
                                }
  }, 10);
                            
  swiper.on('reachEnd', function(){
        $(".swiper-slide").css('transform', 'translate3d(0px, 0px, 0px)');
  });
});

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

Unusual occurrences of backslashes in arrays when using JSON.stringify

While experimenting with JavaScript, I observed an unusual behavior when inserting a backslash \ into a string within an array and using JSON.stringify() to print it. Normally, the backslash is used for escaping special characters, but what if we actu ...

The images that have been uploaded display only a few thumbnails

My goal is to display thumbnail images along with an input field next to them after they are uploaded to the server. The issue I'm facing is that my function attempts to display the images before they are actually uploaded. I believe the problem lies ...

The React component fails to re-render upon the initial state update

Currently, I am working on a straightforward survey that requires simple Yes or No answers. The questions are stored in a separate file called QuestionsList.js: Here is the list of questions: const QuestionsList = [ "Do you believe in ghosts?", "Have you ...

In JavaScript, not all elements are removed in a single iteration, even if the condition is consistently met

I'm currently attempting to compare two arrays containing multiple objects and remove elements based on a condition. To my surprise, while testing in Chrome's console, I noticed that the first array (arr1) is not being emptied even though I am us ...

Instructions on creating a number increment animation resembling Twitter's post engagement counter

I've been attempting to replicate the animation seen on Twitter's post like counter (the flipping numbers effect that happens when you like a post). Despite my best efforts, I can't seem to make it work. Here is what I have tried: $(fun ...

Executing empty arguments with `execute_script` in Selenium with Firefox

I need help setting the value of a textarea using JavaScript instead of the send_keys() method. According to the documentation, I should be able to pass a webelement to execute_script as a parameter and refer to this parameter using the arguments array. H ...

Is it possible for a JavaScript .execute function to be executed synchronously, or can it be transformed into an Ajax

Currently, I am utilizing the ArcGIS API for Javascript which can be found at this URL: The JavaScript code snippet I'm working with appears to be running asynchronously. Is there a way to convert it to run synchronously or potentially transform it i ...

JQuery Menu with Broken UL Formatting on Windows versions of IE and Firefox

Hey there! I've been struggling with a menu design that works perfectly on Mac browsers but is completely broken on Windows. I've spent hours trying to fix it and would really appreciate if a kind programmer could take a look and help me out. The ...

Maximizing the Potential of Return Values in JavaScript

I have a JavaScript code that retrieves information and displays it in a div. It's functioning properly, but I want to dynamically change the div id based on the returned data. For example: function autoSubmit3() { $.post( 'updatetyp ...

Modify the collapse orientation in Bootstrap

I would like the button to expand from the bottom when clicked and collapse back down, instead of behaving like a dropdown. <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

Issue with React Native Hook where converting a function into a class variable results in 'undefined'

We are currently in the process of converting a react native function into a class so that we can implement state management compatible with Firebase's real-time database. It recently came to our attention that Hooks cannot be used within a class, so ...

php send back a JSON containing an error message using AngularJS

I am a beginner with PHP and AngularJS, I have written some PHP code that can return JSON data in the following format: {id:10, sessionName:99, computer:99, quality:LAN(very fast), networkAuthentication:Disable,…} {id:13, sessionName:55, computer:55, q ...

Searching an array object inside another array object using JavaScript/AngularJS

Here is my issue: I am facing a situation where I have two Array objects as follows var array1 = [{ "id": 1, "name": "potatoe", photo="photo"}, {"id": 2, "name": "budget"}] var array2 = [{ "id": 1, "name": "potatoeModified"},{ "id": 3, "name": "UhOhA ...

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

Angular material table featuring custom row design

My team is working with a large table that is sorted by date, and we are looking to add some guidance rows to help users navigate through the data more easily. The desired structure of the table is as follows: |_Header1_|_Header2_| | 25/11/2018 | ...

try out testing with the mock declaration in Jasmine test

My service involves loading a variable from a JavaScript file fetched from a CDN (without a typedef). To handle this, I have created a declaration for the variable: declare const externalValue: string; @Injectable() export class Service { ... Everythi ...

Encasing a series of AJAX calls in a function: Implementing JavaScript and JQuery

I am facing an issue with a chain of two AJAX requests within a forEach() loop, where the second request relies on the response of the first. I have tried to wrap this code block in a function for reusability, but it seems to stop working. As a beginner in ...

Preventing bubbling and propagation in Ember 2.x

Is there a specific method to prevent event bubbling in Ember 2.18 in this particular situation? I couldn't find a matching example in the official documentation, but I did come across two alternative solutions on other websites. Both of them seem to ...

Query the number of Firebase instances using the firebase.appCount property in Firebase v

When setting up Firebase in my React applications, I typically initialize it as follows: if (firebase.apps.length < 1) { firebase.initializeApp(firebaseConfig); // Additional initialization for other Firebase products } This method was working flaw ...

Sinon causing 'unsafe-eval' error in Chrome extension unit tests

Recently, I've been conducting unit tests on my Chrome extension using Mocha, Chai, and Sinon. However, I encountered an issue when attempting to stub an object from a method: EvalError: Refused to evaluate a string as JavaScript because 'unsafe ...