Navigating horizontally with buttons in VueJS

Question

Navigating horizontally with buttons in VueJS

I am searching for a way to implement horizontal scrolling using buttons in VueJS. The idea is to have a container with multiple divs arranged horizontally, and I wish to navigate through them using the buttons.

If you want to see a similar solution using JQuery, you can check out this thread on SO. Also, here's a demo showcasing the desired effect in JQuery.

Is there a way to achieve this effect using VueJS?

I've already looked into a couple of libraries such as vue-scroll-to and jump.

Vue-scroll-to requires specifying an element to scroll to, but I need to scroll horizontally within a specific element by a fixed number of pixels.
Jump allows vertical scrolling over a set amount of pixels and seems to only work on the window.

UPDATE: I came across a small library that solves this issue using VanillaJS: https://github.com/tarun-dugar/easy-scroll

javascript html css vue.js scroll

Answer 1

Answer №1

Take a look at the sandbox I created for this: sandbox link

Here is how the logic works:

scroll_left() {
  Use this function to scroll left by reducing the scrollLeft property value.
},
scroll_right() {
  Use this function to scroll right by increasing the scrollLeft property value.
}

In this implementation, you manipulate the scrollLeft property of a wrapper element.

If you want to see the complete code, click on this link: full code here

Answer 2

Take a look at the sandbox I created for this: sandbox link

Here is how the logic works:

scroll_left() {
  Use this function to scroll left by reducing the scrollLeft property value.
},
scroll_right() {
  Use this function to scroll right by increasing the scrollLeft property value.
}

In this implementation, you manipulate the scrollLeft property of a wrapper element.

If you want to see the complete code, click on this link: full code here

Answer 3

Answer №2

For those seeking a horizontal smooth scroll animation in vanilla JavaScript without relying on any external library, you can achieve it using the scrollTo method with behavior: 'smooth'.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
el: '#app',

data: {
  scrollAmount: 0,
},

methods: {
scrollLeft: function () {
      const menu = this.$refs.menu
       menu.scrollTo({
      left: this.scrollAmount += 200,
      behavior: 'smooth',
    })
    },

scrollRight: function () {
      const menu = this.$refs.menu
       menu.scrollTo({
      left: this.scrollAmount -= 200,
      behavior: 'smooth',
    })
    }
},
mounted() {}
})

body {
    margin: 3em;
}

* {
    padding: 0;
    margin: 0;
} 

.menu-wrapper {
    position: relative;
    max-width: 310px;
    height: 100px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu   {
  height: 120px;
  background: #f3f3f3;
  box-sizing: border-box;

  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
    
.item {
    display: inline-block;
    width: 100px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
}

 
.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
}
.left-paddle {
    left: 0;
}
.right-paddle {
    right: 0;
}
.hidden {
    display: none;
}

.print {
  margin: auto;
  max-width: 500px;
}
    
span {
    display: inline-block;
    width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="menu-wrapper">
   <ul class="menu" ref="menu">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
    <li class="item">10</li>
    <li class="item">11</li>
    <li class="item">12</li>
    <li class="item">13</li>
  </ul>
  
    <div class="paddles">
    <button class="left-paddle paddle" @click="scrollRight"> -
        </button>
      
        <button class="right-paddle paddle" @click="scrollLeft">
          >
        </button>
  </div>
  
</div>

Answer 4

For those seeking a horizontal smooth scroll animation in vanilla JavaScript without relying on any external library, you can achieve it using the scrollTo method with behavior: 'smooth'.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
el: '#app',

data: {
  scrollAmount: 0,
},

methods: {
scrollLeft: function () {
      const menu = this.$refs.menu
       menu.scrollTo({
      left: this.scrollAmount += 200,
      behavior: 'smooth',
    })
    },

scrollRight: function () {
      const menu = this.$refs.menu
       menu.scrollTo({
      left: this.scrollAmount -= 200,
      behavior: 'smooth',
    })
    }
},
mounted() {}
})

body {
    margin: 3em;
}

* {
    padding: 0;
    margin: 0;
} 

.menu-wrapper {
    position: relative;
    max-width: 310px;
    height: 100px;
    margin: 1em auto;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
}

.menu   {
  height: 120px;
  background: #f3f3f3;
  box-sizing: border-box;

  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
    
.item {
    display: inline-block;
    width: 100px;
    height: 100%;
    outline: 1px dotted gray;
    padding: 1em;
    box-sizing: border-box;
}

 
.paddle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3em;
}
.left-paddle {
    left: 0;
}
.right-paddle {
    right: 0;
}
.hidden {
    display: none;
}

.print {
  margin: auto;
  max-width: 500px;
}
    
span {
    display: inline-block;
    width: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="menu-wrapper">
   <ul class="menu" ref="menu">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
    <li class="item">6</li>
    <li class="item">7</li>
    <li class="item">8</li>
    <li class="item">9</li>
    <li class="item">10</li>
    <li class="item">11</li>
    <li class="item">12</li>
    <li class="item">13</li>
  </ul>
  
    <div class="paddles">
    <button class="left-paddle paddle" @click="scrollRight"> -
        </button>
      
        <button class="right-paddle paddle" @click="scrollLeft">
          >
        </button>
  </div>
  
</div>

Answer 5

Answer №3

By utilizing JavaScript alone, I have successfully converted the example you provided into a JavaScript-only format. Here is the Codepen link where you can view the code in action:

https://codepen.io/immad-hamid/pen/yEmayr

This JavaScript code can effectively replace the original example you shared:

const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
const content = document.querySelector('#content');

rightBtn.addEventListener("click", function(event) {
  content.scrollLeft += 300;
  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  content.scrollLeft -= 300;
  event.preventDefault();
});

If you wish to incorporate animations, it would require implementing additional functionalities. Are you able to handle that?

Answer 6

By utilizing JavaScript alone, I have successfully converted the example you provided into a JavaScript-only format. Here is the Codepen link where you can view the code in action:

https://codepen.io/immad-hamid/pen/yEmayr

This JavaScript code can effectively replace the original example you shared:

const rightBtn = document.querySelector('#right-button');
const leftBtn = document.querySelector('#left-button');
const content = document.querySelector('#content');

rightBtn.addEventListener("click", function(event) {
  content.scrollLeft += 300;
  event.preventDefault();
});

leftBtn.addEventListener("click", function(event) {
  content.scrollLeft -= 300;
  event.preventDefault();
});

If you wish to incorporate animations, it would require implementing additional functionalities. Are you able to handle that?

Answer 7

Answer №4

Here's an example I found on codepen

$ Check out the link https://codepen.io/wa23/pen/pObyrq

Key points to note are:

HTML (pug)

link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet")

h1 Vue Carousel
script#v-carousel(type="x/template")
  .card-carousel-wrapper
    .card-carousel--nav__left(
      @click="moveCarousel(-1)"
      :disabled="atHeadOfList"
    )
    // More HTML code here...
    
#app 
  carousel

CSS (Scss)

JS

Note: Apologies for the delayed response, been swamped with work lately.

Answer 8

Here's an example I found on codepen

$ Check out the link https://codepen.io/wa23/pen/pObyrq

Key points to note are:

HTML (pug)

link(href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400" rel="stylesheet")

h1 Vue Carousel
script#v-carousel(type="x/template")
  .card-carousel-wrapper
    .card-carousel--nav__left(
      @click="moveCarousel(-1)"
      :disabled="atHeadOfList"
    )
    // More HTML code here...
    
#app 
  carousel

CSS (Scss)

JS

Note: Apologies for the delayed response, been swamped with work lately.

Navigating horizontally with buttons in VueJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Use Vue.js to display a class when the input is invalid and not empty

Node.js utilized for conducting anti-virus scans on server-bound files prior to uploading

AngularJS function orderBy reverses the array instead of sorting it

Add at the beginning of each row in the text area

Tips on adjusting the label size of a radar chart in chart.js

Trouble arises with AJAX due to DOM traversal errors

Using an iframe containing a link to trigger the opening of a colorbox in the

"Caution: The `className` property did not align" when configuring a theme provider within Next.js

What methods can be used to protect (encrypt using Java code) the information in a login form before it is sent to a servlet for

A guide on effectively mocking a Vuex store within the parentComponent of VueJS test-utils

Page rotates on hover effect with RotateY

What is the reason behind Firefox failing to display a linear gradient when the background-size values are more than 255px?

The extent of the modal window (AngularJS directive)

I'm having trouble retrieving the sessionid while using vue-cookies

How can I dynamically assign ng-model with a filter for a particular object in an array?

What steps can be taken to resolve the deprecated error for isVueInstance in vue.js2?

How can I set the width of a container dynamically using the Next JS Image component?

The tip display script is unable to revert back to its original content

Transforming jQuery code to pure vanilla Javascript

Experiencing issues with transferring JSON response from Axios to a data object causing errors