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

How can I dynamically adjust the stroke length of an SVG circle using code?

Swapping out LinkButtons using jQuery

navigating to the assets directory using nginx and vite

Doesn't seem like jQuery's .blur() is responsive on dynamically created fields

Managing toggles for save and edit buttons in Vue - a comprehensive guide

When the onClick event on one element triggers a change in another element within the

The feature of option display is not supported on Safari browser

Enhance your React application by making two API requests in

Rendering a React component conditionally within the same line

Vue - employing a function to combine the values of two user inputs and store the result in the data property

How can we trigger a function once an ajax request has finished, without directly interacting with the ajax

Is it possible to configure the Eclipse Javascript formatter to comply with JSLint standards?

The Mystery of the Undefined Return Value in JavaScript's Map Function

Click to dynamically toggle classes with jQuery

How can one properly iterate through an HTML Collection in JavaScript?

Understanding JavaScript Regular Expressions

How can I declaratively bind the properties in Dojo's _hasDropDown method?

Unable to verify POST $http request using $httpBackend

What is the best way to insert one object into another object after its data has been modified?

Unable to insert hyperlinks into table rows within a React application