Orbit slider breaks

When navigating Orbit slides using arrows or bullets, it breaks after having reached first slide.

See this Fiddle: https://jsfiddle.net/konsulenten/x3v1rdL8/12/

If I change to Foundation 5.3.1 it works as intended.

What is wrong?

Best regards,
Reidar

Hi, it seems you mix different versions, markup and outdated motion-ui.

Please create a codepen with the latest markup and dependencies from the docs at https://get.foundation.

jsfiddle has no responsive design and is broken on smartphones and makes it harder to test and debug.

I can confirm this bug.

I’m using webpack with babel and with foundation-sites@6.6.1 orbit just crash after pressed previous button or reached first slide.

After swap to foundation-sites@6.5.3 with the same webpack config orbit slider work well.

Regards

Hi, please provide a full codepen so we can reproduce and test this. Thank you.

Probably related: https://github.com/foundation/foundation-sites/pull/11944

Hi, thanks for your intrested.

Here you have a 6.5.3 version:
foundation-sites@6.5.3

Here is 6.6.1
foundation-sites@6.6.1

I generated assets with this config:
Webpack:

const { dirname, join, resolve } = require(‘path’);
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);
const TerserJSPlugin = require(‘terser-webpack-plugin’);
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin’);
const webpack = require(‘webpack’);
var path = require(‘path’);
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: ‘app.css’,
}),
new webpack.ProvidePlugin({
: "jquery", jQuery: "jquery" }) ], entry: [ './src/main.js', './src/main.scss', ], output: { path: path.resolve(__dirname, 'build'), filename: 'app.js' }, optimization: { minimizer: [ new TerserJSPlugin({ extractComments: true, }), new OptimizeCSSAssetsPlugin({ cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, canPrint: true }) ], }, module: { rules: [ { test: /\.m?js/,
exclude: /(node_modules|bower_components)/,
use: {
loader: ‘babel-loader’,
options: {
presets: [’@babel/preset-env’]
}
}
},
{
test: /.s?[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: ‘css-loader’, options: { sourceMap: true } },
{ loader: ‘postcss-loader’, options: { sourceMap: true } },
{ loader: ‘sass-loader’, options: { sourceMap: true } },
],
},
]
},
stats: {
colors: true
},
devtool: ‘source-map’
};

Js entry:

import Foundation from ‘foundation-sites’;
import jquery from ‘jquery’;
import ‘what-input’;

window.jQuery = jquery;
window. = jquery; Foundation.addToJquery();
jQuery(document).ready( => ((document).foundation()));

SASS entry:

@import '~foundation-sites/scss/foundation';
@import '~motion-ui/src/motion-ui';

@include motion-ui-transitions;
@include motion-ui-animations;
@include foundation-everything;
@include foundation-prototype-classes;
1 Like

Yes, this issue is fixed by my PR.

I dont exacly know what you want to say in yours previous replies. Can you explain?

This PR fixes the issue: https://github.com/foundation/foundation-sites/pull/11944

3 Likes